Adding a block between two other blocks on a mobile device using Bootstrap 4

Question

Adding a block between two other blocks on a mobile device using Bootstrap 4

I am trying to achieve a specific layout on both desktop and mobile devices. On desktop, I want the layout to be structured as follows:

[1][2]
[3][2]

The requirement is for column 2 to be the same height as columns 1 and 3 on desktop screens.

For the mobile layout, I want the structure to change to:

[1]
[2]
[3]

I have attempted two different options to achieve this layout:

Option 1:

        <div class="row">
            <div class="col-md-7">
                <span>1</span>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>

            <div class="col-md-7">
                <span>3</span>
            </div>
        </div>

The issue with this approach is that block 2 ends up being the height of block 1 only.

Option 2:

I considered using column ordering to place block 2 between blocks 1 and 3:

        <div class="row">
            <div class="col-md-7">
                <div>
                    <span>1</span>
                </div>

                <div>
                    <span>3</span>
                </div>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>
        </div>

However, I believe this approach may not be possible.

Are there any alternative methods that I have overlooked? Or is it feasible to achieve this layout using one of the methods mentioned above?

Thank you.

html css bootstrap-4 flexbox

Answer 1

Answer №1

Here's an example you can try out:

#flex_box1 div
{
  width:100%;
  height:150px;
  border: 2px solid #555;
  margin-bottom:15px;  
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
  width:100%;
  height:100%;
  background-color: #555; 
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-4 d-flex flex-column" id="flex_box1">
          <div></div>
          <div></div>
        </div>
        <div class="col-8 " id="flex_box2">
          <div></div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Answer 2

Here's an example you can try out:

#flex_box1 div
{
  width:100%;
  height:150px;
  border: 2px solid #555;
  margin-bottom:15px;  
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
  width:100%;
  height:100%;
  background-color: #555; 
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-4 d-flex flex-column" id="flex_box1">
          <div></div>
          <div></div>
        </div>
        <div class="col-8 " id="flex_box2">
          <div></div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Answer 3

Answer №2

If you're looking for a simple and efficient solution, I recommend using the Masonry library. It's easy to implement and provides great results for both desktop and mobile versions. You can find more information and the link here.

For a demo of how Masonry works, you can check out this link: https://codepen.io/Bibeva/pen/qBExWjj

To implement Masonry, you can use the following HTML:

<!-- Include Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row grid">
  <div class="col-md-6 grid-item">
    <span>1</span>
  </div>

  <div class="col-md-6 grid-item grid-item-box">
    <span>2</span>
  </div>

  <div class="col-md-6 grid-item">
    <span>3</span>
  </div>
</div>

<!-- Include jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Include Masonry JS CDN -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- Custom JS -->
<script>
$('.grid').masonry({
  itemSelector: '.grid-item'
});
</script>

And don't forget the CSS:

.grid-item { 
  background: #000;
  color: #fff;
  height: 100px;
}

.grid-item-box { 
  height: 200px;
  background: #333;
}

Answer 4

If you're looking for a simple and efficient solution, I recommend using the Masonry library. It's easy to implement and provides great results for both desktop and mobile versions. You can find more information and the link here.

For a demo of how Masonry works, you can check out this link: https://codepen.io/Bibeva/pen/qBExWjj

To implement Masonry, you can use the following HTML:

<!-- Include Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row grid">
  <div class="col-md-6 grid-item">
    <span>1</span>
  </div>

  <div class="col-md-6 grid-item grid-item-box">
    <span>2</span>
  </div>

  <div class="col-md-6 grid-item">
    <span>3</span>
  </div>
</div>

<!-- Include jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Include Masonry JS CDN -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- Custom JS -->
<script>
$('.grid').masonry({
  itemSelector: '.grid-item'
});
</script>

And don't forget the CSS:

.grid-item { 
  background: #000;
  color: #fff;
  height: 100px;
}

.grid-item-box { 
  height: 200px;
  background: #333;
}

Answer 5

Answer №3

.container1{
    display:inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
 }
.container1 div {
    height: 50vh;
    width: 200px;
    margin: 0;
    border: 1px solid black;
    color: #fff;
    text-align: center;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
}
.div1 {
    background: #f60;
}
.div2 {
    background: #f55;
    height: 100vh!important;
}
.div3 {
    position: absolute;
    bottom: 0;
    left:0;
    background: #0ae4dd;
}

<div class="container1">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

<pre>
**For Mobile View** 
@media(max-width: 992px){
  .container1{
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }
  .container1 div {
    width:100%;
    height: auto;
  }
  .div2 {
    height: auto!important;
  } 
  .div3{
    position:inherit;
  }
}
</pre>

Answer 6

.container1{
    display:inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
 }
.container1 div {
    height: 50vh;
    width: 200px;
    margin: 0;
    border: 1px solid black;
    color: #fff;
    text-align: center;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
}
.div1 {
    background: #f60;
}
.div2 {
    background: #f55;
    height: 100vh!important;
}
.div3 {
    position: absolute;
    bottom: 0;
    left:0;
    background: #0ae4dd;
}

<div class="container1">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

<pre>
**For Mobile View** 
@media(max-width: 992px){
  .container1{
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }
  .container1 div {
    width:100%;
    height: auto;
  }
  .div2 {
    height: auto!important;
  } 
  .div3{
    position:inherit;
  }
}
</pre>

Answer 7

Answer №4

In the event that someone requires a solution in the future, I ultimately decided to utilize flex-direction: column and set a height on the container:

HTML:

        <div id="flex-container" class="row flex-lg-column">
            <div class="col-12 col-lg-6 order-1">
                <span>1</span>
            </div>

            <div class="col-12 col-lg-6 order-3">
                <span>2</span>
            </div>

            <div class="col-12 col-lg-6 order-2">
                <span>3</span>
            </div>
        </div>

CSS:

@media (min-width: 992px) {

    #flex-container { 
        max-height: 40rem; 
    }
    #flex-container .order-1, 
    #flex-container .order-2, 
    #flex-container .order-3 { order: initial; }
}

Furthermore, due to the fact that Bootstrap 4 .row has flex-wrap: wrap, the third block will wrap to the right side of the other two blocks on large screens.

Answer 8

In the event that someone requires a solution in the future, I ultimately decided to utilize flex-direction: column and set a height on the container:

HTML:

        <div id="flex-container" class="row flex-lg-column">
            <div class="col-12 col-lg-6 order-1">
                <span>1</span>
            </div>

            <div class="col-12 col-lg-6 order-3">
                <span>2</span>
            </div>

            <div class="col-12 col-lg-6 order-2">
                <span>3</span>
            </div>
        </div>

CSS:

@media (min-width: 992px) {

    #flex-container { 
        max-height: 40rem; 
    }
    #flex-container .order-1, 
    #flex-container .order-2, 
    #flex-container .order-3 { order: initial; }
}

Furthermore, due to the fact that Bootstrap 4 .row has flex-wrap: wrap, the third block will wrap to the right side of the other two blocks on large screens.

Adding a block between two other blocks on a mobile device using Bootstrap 4

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

The Blockquote class is not displaying the lines properly in Bootstrap 4 Beta 3

Can a stack method be utilized to create a HTML tag checker?

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

Strategies for accessing elements within a #shadow-root

Dynamic content that adjusts based on a multi-row element

Show the current temperature data retrieved from the weather API

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

How to perfectly center a dropdown menu using CSS across different web browsers

Optimal methods for refreshing website lists

Creating PNG images in a scripting language for web applications

React component allowing for the reuse of avatars

MacOS web browsers adjust content to fit the screen size

Tips for correcting the sentence that extends beyond the boundaries of the Material UI box

Implementing a dual hover effect on a Div element

Error in thread : TagNameUnexpectedException

Aligning Content in the Header

Create an XML document using the DOM structure, but exclude specific elements in the process

I am attempting to center an image on a webpage while disregarding the margins set on the

The lines intersecting with the ethereal image in the background