Maintaining the layout of two columns in Bootstrap 4, responsive design turns them into a single stacked

Currently using Bootstrap v4 with a two-column layout that splits the container in half. On larger screens, the items in each column display correctly. However, on smaller screens, Bootstrap shuffles the items from column 2 into column 1.

I am looking to achieve a different effect where the items from column 2 stack under or after all the items in column 1, rather than being shuffled together. I have provided a JSFiddle to demonstrate my desired outcome.

Any assistance would be greatly appreciated. Cheers!

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

.col-md-6 {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
    <lable><strong>Normal 2 Column on medium/big screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A1</div>
        <div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B1</div>
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A2</div>
        <div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        <div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>Common Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>DESIRED Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Check out the revised code:

<div class="container">
<lable><strong>Displaying 2 Columns on medium/big screens</strong></lable>
<div class="row">
     <div class="col-md-6">
       <div class="row">
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A1</div>
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A2</div>
         <div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A3</div>
       </div>
     </div>
     <div class="col-md-6">
        <div class="row">
          <div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B1</div>
          <div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        </div>

     </div>
</div>

To keep columns A's and B's separate, I have placed them in different columns with col-md-6 class to ensure they are side by side. Each column contains the child columns you want to display beneath each other.

Answer №2

Do you want it to look like this?

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

.col-md-6 {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
    <lable><strong>Normal 2 Column on medium/big screen</strong></lable>
    <div class="row">
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A1</div>
        <div class="col-6" style="background-color: yellow; margin-bottom: 15px;">B1</div>
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A2</div>
        <div class="col-6" style="background-color: yellow; margin-bottom: 15px;">B2</div>
        <div class="col-6" style="background-color: green; margin-bottom: 15px;">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>Common Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: yellow">B1</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: yellow">B2</div>
    </div>
    <div class="row">
        <div class="col" style="background-color: green">A3</div>
    </div>
</div>

<div class="container">
    <lable><strong>DESIRED Responsive 2 Column on small/mobile screen</strong></lable>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A2</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: green">A3</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B1</div>
    </div>    <div class="row">
        <div class="col-md-6" style="background-color: yellow">B2</div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of multiple UI-Views is not meeting the intended outcomes

I'm facing an issue with integrating multiple UI-views in my AngularJS dashboard app. Despite following the directory structure, I am unable to get it working as expected. This is how my directories are organized: index.html app/ app.js dash ...

htmlangularjsangular-ui-routerangularjs-routing

Pattern matching system to replace only the single occurrence of a character preceding a particular sequence

I have a lot of HTML code that looks like this: <a href="http://example.com/project-a" title="Project A (test)">Project A (test</span></a> <a href="http://example.com/project-b" title="Project B (test)">Project B (test</span> ...

phphtmlregex

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image

Is there a way to make sure all source code is aligned to the left?

I'm interested in enhancing the appearance of the source code on my WordPress website. Currently, it looks cluttered with unnecessary empty lines and alignment issues. Is there a way to optimize the source code so that everything is left-aligned and ...

phphtmlwordpresscompressionminify

Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html? If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application? The ve ...

cssangularwebpacksass

Is there a way to verify and send notifications when duplicate entries are added to my table?

Whenever a make and model are added using the "add" button, I need to ensure that there are no duplicates. If a duplicate is found, an alert should be displayed, and the entry should not be added to the table. Unfortunately, I have been unable to find a so ...

javascriptjqueryhtmlcssangularjs

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

javascriptphpjqueryhtmlwordpress

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

htmlcssimagenav

Firefox does not display the line headings on the sides

Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...

css

How big is the array size in the WebAudio API data?

Exploring the visualization of waveform and FFT generated by the audio stream from the microphone through the WebAudio API. Curiosity strikes - what is the size of each data array available at a given moment? Delving into the getByteTimeDomainData, it men ...

javascripthtmlaudioweb-audio-api

Shift the checkbox label over to the left with just CSS

I am faced with the following code snippet: <div> <span> <input type="checkbox"> <label>I desire this to appear on the left-hand side</label> </span> </div> My goal is to shift the label to the left side of ...

htmlcsscheckboxlabel

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...

javascripthtmlangulartypescriptrxjs

What is the best way to create a 6-column grid system without using bootstrap?

I am looking to create a row with 2 columns that should turn into 2 separate rows, each containing one column when viewed on smaller devices. I have researched CSS Grid but find it quite complex. Can someone simplify it for me? Thank you! ...

csslayoutgrid

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml

Tips for aligning an icon vertically within a span tag

I have a span similar to this: <span class="indicator"></span> Sometimes this span contains numbers like: <span class="indicator"> <span>10</span> </span> Other times it may display Kendo-UI icons, such as: < ...

htmlcsskendo-ui

An overflow occurs due to the grid column gap

After testing CSS display: grid, I noticed that the grid-column-gap: 10px; property is causing the parent container to break. This makes the green area in my code smaller than the grid area itself. It seems like box-sizing: border-box; doesn't have a ...

htmlcsscss-grid

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

The text does not change in the input field even with the .value method

I'm encountering an issue where I want to use .value to set the text of an input field. However, after setting the value of the input field, the text disappears when clicked on. I would like to find a solution where the text does not disappear upon cl ...

javascripthtml

What are the best methods to prevent infinity printing?

While attempting to create a clock that displays time in real-time after adding a time zone, I encountered an issue where the time was being printed multiple times. My objective is to have it printed once and dynamically change according to the different t ...

javascripthtmlapi

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

javascripthtmlcanvashtml5-canvas