BOOTSTRAP : Mobile First

MOBILE FIRST

When designing pages, it's generally a best practice to design for the mobile, or smallest, device first. It's easier to scale content to a larger size, than it is to shrink the content. The process of designing for mobile devices first is called, creatively, mobile first.

Bootstrap is built with mobile-first in mind. When you use the different commands to control the size and placement of the items being displayed on your grid, it works best when you have the mobile layout defined, and then you use the different push and pull commands to control content placement on larger sizes.

Imagine the following scenario. Let's imagine we have two pieces of information, or images, that we need to display to the user. Without focusing on the actual content, the scenario is this: I have content that I want to be on the left side for medium and large screens in Bootstrap terms (large screens), but on the bottom for extra-small and small screens (small screens). I also have content that I want to be on the right side for large screens, but on the top for small screens.

I'm going to represent this with text named DETAILS and LOGO, respectively.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

Let's start by building for the larger screens (medium and large). We can of course do this by just using the md abbreviation.

1. <div class='row'>
2.    <div class='col-md-6'>DETAILS</div>
3.    <div class='col-md-6'>LOGO</div>
4. </div>

Now let's add the code for the smaller screens. We can do this by using the xs abbreviation.

We start by pushing the left side content (Don't highlight this) data 12 columns to the right, which should cause it to automatically move to the next row. Remember this is the default behavior with Bootstrap grids; if something goes beyond column 12, it is automatically moved to the next row.

We then pull the right side content to the left 6 columns. This will bring it back to the beginning.

We'll finish everything by sizing each piece of content to take up 12 columns.

1. <div class='row'>
2.    <div class='col-md-6   col-xs-push-12   col-xs-12'>DETAILS</div>
3.    <div class='col-md-6   col-xs-pull-6        col-xs-12'>LOGO</div>
4. </div>

The result is not going to be what we want.

Extra-small & small displays
D
O

The first row, or DETAILS, will be wrong because we told Bootstrap to move it to the right 12 columns. While Bootstrap normally moves content to the next row in scenarios where the size is greater than 12 columns, it keeps it on the same row when using push, pushing it all the way off the screen.

Towards that end, with the second row, or LOGO, we pulled the data to the left 6 columns. Bootstrap will try to honor that request by again keeping it on the same row, and pulling it to the left 6 columns. The result is, again, that the content will be off the screen.

Let's start this over again, focusing on mobile first. We know we want LOGO to be on the top, and DETAILS on the bottom. Let's build that part first, or "mobile first".

1. <div class='row'>
2.    <div class='col-xs-12'>LOGO</div>
3.    <div class='col-xs-12'>DETAILS</div>
4. </div>

While I put the column in the same row, I told each piece of content to be 12 columns. Bootstrap will handle this by putting the content on different rows.

Extra-small & small displays
LOGO
DETAILS

Now let's turn our attention to the larger screens. We want DETAILS to be on the left, taking up 6 columns, and LOGO on the right, taking up 6 columns. What's great is it makes both thinking about this, and explaining it, much simpler.

We start by sizing LOGO and DETAILS for larger screens.

1. <div class='row'>
2.    <div class='col-xs-12  col-md-6'>LOGO</div>
3.    <div class='col-xs-12  col-md-6'>DETAILS</div>
4. </div>

The output will be as follows:

Medium & large displays
LOGO	DETAILS

We want the display to have LOGO on the right, and DETAILS on the left. So we need to push LOGO over 6, and pull DETAILS over 6. Let's add that in.

1. <div class='row'>
2.    <div class='col-xs-12  col-md-6  col-md-push-6'>LOGO</div>
3.    <div class='col-xs-12  col-md-6  col-md-pull-6'>DETAILS</div>
4. </div>

And the final result will be exactly what we wanted it to be. DETAILS on the left, LOGO on the right for larger displays.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

In the end, mobile first design not only worked out the way we wanted it to, but it wound up being much easier to plan as well. We sized everything for our small screens, and then just moved things around, relatively simply, for large screens. When designing with Bootstrap, you want to use mobile first.