Graceful Bootstrap responsive 3-column switch to 2-column for small devices < 768 px

Building a responsive design is so important, and it’s something that web developers put so much time into, that they cannot possibly explain to project managers or clients the difficulty level of both a good responsive design as well as compatibility across browsers and operating systems. On a project that I’m working on as more of a technical advisor, troubleshooting issues the the web designers are having, I was approached with the following issue.

For display there is six (6) blocks of content. The designer felt that they would look best on a desktop in 2 rows of 3. The site is using Bootstrap and the intention is to display 3 columns for desktop, 2 columns on tablet and 1 at phone, so I looked at the first round of HTML the designer had.

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4"><p>1. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>2. and</p><p>More Content...</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>3. Content...<p></div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4"><p>4. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>5. and</p><p>More Content...</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>6. Content...<p></div>
</div>

Well..  this would work on desktop, and on phone but at table since there are two distinct rows the result would end up looking like this:

1 | 2

3

4 | 5

6

So, not being the kind of person who just solves an issue immediately when there is learning to be had, I simply asked what they thought could be causing the line break after block 3…  the response “Well there are 2 rows”.  Of course, so later on I expected to hear that it was still not working with the following code:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4"><p>1. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>2. and</p><p>More Content...</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>3. Content...<p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>4. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>5. and</p><p>More Content...</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>6. Content...<p></div>
</div>

“Now what’s the issue?” I ask, full well knowing that now the blocks would look like this on the tablet, with blocks 3 and 6 appearing to still break and float right…

1 | 2

…..3

4 | 5

…..6

And I think a lot of people who have a glancing knowledge of responsive design and Bootstrap will be scratching their heads on this one, wondering why it doesn’t work?  Well, it’s because of the height of the blocks, they aren’t matching, so block 3 fills down and over because block 1 is taller than block 2.  Is there anyway to fix this, it seems an impossible task….. but alas it’s right there in the docs.  https://getbootstrap.com/css/#grid

It’s called a “responsive column reset”, using .clearfix and a bootstrap responsive utility class your code for this will end up looking like this:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4"><p>1. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>2. and</p><p>More Content...</p></div>
    <div class=" clearfix visible-sm"></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>3. Content...<p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>4. A bunch of content</p><p>displayed in responsive columns</o><p>goes here</p></div>
    <div class=" clearfix visible-sm"></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>5. and</p><p>More Content...</p></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><p>6. Content...<p></div>
</div>

A clearfix div every 2 blocks that is only visible at “sm” or the tablet size..  when the clearfix div appears it breaks the blocks at every 2 giving you the following:

1 | 2

3 | 4

5 | 6

All nice and neat, then at phone size its down to all one column and 3 columns at desktop because the clearfix is not visible.  Pretty cool right?  So, a web developer would be impressed seeing your columns go from 3 to 2 to 1, but unfortunately clients and managers still don’t appreciate these intricacies and the time it takes to know and learn how to make some of these responsive tricks actually work.  Hope this one helps someone, but honestly, if you just read the docs, it’s all there!

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *