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

Question

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

37 Views Asked by Rue Vitale At 20 March 2024 at 17:29

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>

Original Q&A

There are 2 best solutions below

C9_HP On 20 March 2024 at 19:32

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; }}

**isherwood** · Accepted Answer · 2024-03-20T21:06:43.163000

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>

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

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in BOOTSTRAP-4

Trending Questions

Popular # Hahtags

Popular Questions