CODEWITHSUNDEEP
htmlcssbootstrap-4
ajt46
ajt46

Reputation: 11

Using Bootstrap 4.2 To Pull Column Between Two Rows In Other Column



I was wondering how to pull a column into a separate column, but between two rows within the column. Below are images explaining what I mean.

https://i.sstatic.net/i0d4D.png https://i.sstatic.net/xXq6Q.png

Basically, I'd like to pull "Blue" between "Red" and "Green" for mobile and tablets.

Any input is appreciated. Thank you!

Upvotes: 0

Views: 41

Answers (1)

Piotr Glejzer
Piotr Glejzer

Reputation: 278

I don't know how your code example is looking but I made a simple example with bootstrap && jQuery.

function resized(element) {
  const $element = $(element);
  const $box3 = $('.box3');
  
  if ($element.width() < 768) {
    $box3.insertBefore($(".box2"));
  } else {
    $(".box3-container").append($box3);
  }
}


$(document).ready(() => {
  resized(window);
});

$(window).on("resize", e => {
  resized(e.target);
})
body {
  font-family: sans-serif;
}
.box1,
.box2 {
  width: 200px;
  height: 100px;
  color: #fff;
}
.box3 {
  width: 300px;
  height: 300px;
  color: #fff;
}
.box2 {
  background: red;
}
.box1 {
  background: green;
}
.box3 {
  background: blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="box-container d-flex flex-column">
        <div
             class="box1 d-flex justify-content-center align-items-center m-3 text-uppercase"
             >
          box1
        </div>

        <div
             class="box2 d-flex justify-content-center align-items-center m-3 text-uppercase"
             >
          box2
        </div>
      </div>
    </div>
    <div class="col-md-6 box3-container">
      <div
           class="box3 6 d-flex justify-content-center align-items-center text-uppercase m-3"
           >
        box3
      </div>
    </div>
  </div>
</div>

Example on codepen: https://codepen.io/pglejzer/pen/OJVbaXW?editors=1010

Upvotes: 1

Related Questions