3 columns responsive using Bootstrap

HTML & CSS
1

Hi,

I am trying to achieve the following:

Display 3 columns (COLUMN 1, COLUMN 2 and COLUMN 3) on desktop and large desktops.
Display 2 columns (COLUMN 1 and COLUMN 2) on tablet
Display 1 column (COLUMN 1) on mobile

But my code below doesn’t seem to do what I want. Any ideas what I have wrong?

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-md-6">COLUMN 1</div>
        <div class="col-sm-3 col-md-3 hidden-xs">COLUMN 2</div>
        <div class="col-md-3 hidden-xs">COLUMN 3</div>
      </div>
</div>
1 Like
2

I’m a bit rusty with bootstrap so there may be a better way but this seems to do what you want.

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">COLUMN 1</div>
        <div class="col-sm-6 col-md-3 hidden-xs">COLUMN 2</div>
        <div class="col-md-3 hidden-xs hidden-sm">COLUMN 3</div>
      </div>
</div>
3

Thanks, that worked perfectly :slight_smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.