CODEWITHSUNDEEP
htmlcssbootstrap-4flexboxbootstrap-5
The Dead Man
The Dead Man

Reputation: 5566

4 columns in desktop, 2 in small device

I have a simple block in which I want to display 4 items on the desktop in a row and 2 items per row on the small devices meaning tablets and mobile. something like this below enter image description here

Live demo : jsfiddle

Here is my HTML.

<div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">Column 1</div>
      <div class="col-md-3 col-sm-6">Column 2</div>
        <div class="w-100 visible-sm" ></div> //tried this but not working
      <div class="col-md-3 col-sm-6">Column 3</div>
      <div class="col-md-3 col-sm-6">Column 4</div>
    </div>
  </div>

Am confused what is wrong here?

Upvotes: 0

Views: 1333

Answers (1)

isherwood
isherwood

Reputation: 61063

You haven't accommodated the smallest breakpoint, so your columns go full-width. Just switch the sm classes:

<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col-md-3">Column 1</div>
    <div class="col-6 col-md-3">Column 2</div>
    <div class="col-6 col-md-3">Column 3</div>
    <div class="col-6 col-md-3">Column 4</div>
  </div>
</div>

Fiddle demo

Upvotes: 2

Related Questions