CODEWITHSUNDEEP
htmlcssbootstrap-4
Greg Viv
Greg Viv

Reputation: 847

How to make 4 columns in bootstrap grid break to two then one column

Here is my bootstrap code so far:

<div class="container-flex">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>

A simple 4 column setup. Currently it breaks into single column on large (lg class) breakpoint. Is there any way I can set it up so it breaks into two columns on large breakpoint then into one column on medium (md class ) breakpoint? I've been looking over bootstrap tutorials and can't find any solution.

Here's my jsfiddle: https://jsfiddle.net/noe562h0/

Upvotes: 4

Views: 3212

Answers (4)

Ivananutrition
Ivananutrition

Reputation: 56

https://jsfiddle.net/x4rjp1gq/

<div class="container-flex">
    <div class="row">
    <div class="col-lg-3">
      <div class='col'>1</div>
        <div class='col'>2</div>
    </div>
      <div class="col-lg-3">
      <div class='col'>3</div>
        <div class='col'>4</div>
      </div>

    </div>
</div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  text-align:center;
}

Upvotes: 0

Amarjit Singh
Amarjit Singh

Reputation: 1192

Check the below fiddle:

Grid Breakdown

Upvotes: 0

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

If you want to break differently, you have to use different breakpoint. Like this:

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

Upvotes: 0

JawadR1
JawadR1

Reputation: 399

Try this

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

Here are Bootstrap 4 grid references Bootstrap and w3schools.com documentation.

Upvotes: 5

Related Questions