Html Question posted in
Some basic documentation can be found here.

Html – How to show one cols on mobile but three cols on desktop

I’m trying to show three columns on desktop and one column on mobile. How can I do this? The div has to be responsive. Thanks!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 col-xs-1">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
    
    <div class="col-md-4 col-md-offset-2 col-sm col-sm-offset-0 0 col-xs-1">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
    
    <div class="col-md-4 col-sm col-xs-1">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    One way is to use media queries. Media queries are used to apply some CSS properties if specific condition is true.

    Add id (or a unique class) to all three col divs. I used id="colX" for example:

    <div id="col1">
  <img src = "/static/assets/howitworks3.png"/>
  <p> Test </p>
</div>
<div id="col2">
  <img src = "/static/assets/howitworks3.png" />
  <p>Test</p>
</div>
<div id="col3">
  <img src ="/static/assets/howitworks3.png" />
  <p>Test</p>
</div>

    Add viewport to the <head> of your html file like this:

    <head>
  <meta name='viewport' content='width=device-width,initial-scale=1'/>
  <!-- Other meta tags ... --> 
</head>

    And add this css property to your styles:

    @media (max-width: 599px) {#col2, #col3 { display: none; }}
    Login or Signup to reply.
  2. 0

    I’m not sure what you’re trying to do with all the offset and other classes, but this is about as simple a situation as they come. You want full-width columns (not one column, but three stacked columns) on mobile and 1/3 (4/12) width columns above some breakpoint.

    The col-12 class takes 12 of 12 width units starting at the smallest screen sizes, and col-lg-4 takes 4 of 12 width units starting at 992px. Per Bootstrap’s "mobile first" convention, classes should be listed smallest to largest.

    https://getbootstrap.com/docs/4.6/layout/grid/

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-4">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
    
    <div class="col-12 col-lg-4">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
    
    <div class="col-12 col-lg-4">
      <img src="https://via.placeholder.com/100" />
      <p>Test</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search