Bootstrap 4 – Responsive Web Design

Mixing column classes for different devices

Adding additional classes to each of our column <div>s will allow us to target the grid layout for different devices. Let's consider our three-column layout from before, but this time, we want to lay it out like this:

• The first two columns should be 50% of the layout
• The third column should stretch 100% of the layout and be below the first two

To achieve this layout, we'll mix some different column classes. Here's what the markup should look like:

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div> 

I've added the .col-xs-6 class ...