How to Change Ordering of Bootstrap 4 Columns on Mobile

In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.

By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)


<div class="container">

  <h2>Without column ordering</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
  </div>

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Descending Order</h2>
  <div class="row">
    <div class="col-sm-6 order-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-11">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-10">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-9">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-8">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-7">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-5">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-4">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-3">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Ascending Order</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>
</div>

Alongside this, we added the following CSS, although this isn’t particularly required for our example:


* {
  font-family: 'Roboto', sans-serif;
}

h2 {margin-top:2em;}
.container {
  padding: 2rem;
}

.order-sm-12 img {
  border: 5px solid orange;
}

.order-sm-1 img {
  border: 5px solid blue;
}

In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.

Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.

We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Adding ACF Fields as Admin Columns to your CPT

We all know how awesome Advanced Custom Fields (ACF) is right? We pretty much use the Pro version of it on every WordPress website build we do.

Today, we are going to show you how to add fields to your CPT (Custom Post Type) to the backend Admin Columns.

There are a few plugins that can accomplish adding your ACF fields as admin columns to the backend. Admin Columns is one of the best ones that does the trick. The paid version allows your custom post type to connect with ACF Pro.

As programmers, we want to keep the number of plugins we use to a minimum right? well, it’s pretty simple to add these manually!

Okay, so here we go… Let’s say that you have created a post type, ‘hosting’, and two custom meta fields, ‘start_date’ and ‘end_date’. You’d like to add both meta fields to the custom post type list view. First of all, we will need to add the following to the functions.php file:-


/**
 *	ACF Admin Columns
 *
 */

 function add_acf_columns ( $columns ) {
   return array_merge ( $columns, array ( 
     'start_date' => __ ( 'Starts' ),
     'end_date'   => __ ( 'Ends' ) 
   ) );
 }
 add_filter ( 'manage_hosting_posts_columns', 'add_acf_columns' );

This filter adds your additional columns to the list. We have created an array containing two items – one for the start date and one for the end date – and merged it with the existing columns. The filter is hooked to the specific post type, in this case, manage_hosting_posts_columns, based on the format manage_POSTTYPE_posts_columns. You’ll need to edit this filter to match your custom post type slug.

Secondly, add the following code to output the meta field values:-


 /*
 * Add columns to Hosting CPT
 */
 function hosting_custom_column ( $column, $post_id ) {
   switch ( $column ) {
     case 'start_date':
       echo get_post_meta ( $post_id, 'hosting_start_date', true );
       break;
     case 'end_date':
       echo get_post_meta ( $post_id, 'hosting_end_date', true );
       break;
   }
}
add_action ( 'manage_hosting_posts_custom_column', 'hosting_custom_column', 10, 2 );

Again, notice how the action hook is specific to your post type, in this case, manage_hosting_posts_custom_column. The function looks for the name of your custom columns then echoes the metadata.

Awesome, we’ve added the fields now! But wait, do you want to go the extra step and make the fields sortable? Of course, why wouldn’t you! Here’s how we can do that:-


 /*
 * Add Sortable columns
 */

function my_column_register_sortable( $columns ) {
	$columns['start_date'] = 'start_date';
	$columns['end_date'] = 'start_date';
	return $columns;
}
add_filter('manage_edit-hosting_sortable_columns', 'my_column_register_sortable' );

Well, we hope you have found this tutorial usual, be sure to leave a comment if this has helped you or if you require any help!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share