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

Issues with Media Queries on Desktop Devices

I've encountered an odd issue with my media queries. While they function properly on my mobile devices, resizing my desktop browser doesn't seem to trigger the changes. This prevents me from inspecting my mobile styles using web inspector/firebug ...

htmlcssmedia-queries

Embed the AJAX response into HTML format

I am facing a challenge with rendering an AJAX response in an HTML structure within a PHP file. The issue is that the AJAX response contains multiple data objects, and each of them needs to be placed in specific locations within the HTML. For example, let ...

javascriptphpjqueryhtmlajax

Extract content from an HTML element and transfer it to PHP

Alright, listen up. I've got a task at hand where I need to fetch some information from my database by calling a PHP page through a link (<a href='name.php'>). Let's just say the code is speaking louder than my words: <?php ...

phphtmlmysql

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

Can you point me in the direction of some resources for developing a custom plugin with stylelint?

After visiting the stylelint website and github, I downloaded it locally using npm. The stylelint website suggests using the following format to create my own plugin: var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOpt ...

cssnpmsasspostcssstylelint

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

exploring for a keyword on the primary Amazon platform (analyzing)

Hey everyone, I noticed that Amazon's main search bar code looks like this: <input type="submit" class="nav-input" value="Go" tabindex="7"> I'm considering creating a function that will locate this tag on amazon.co.uk and perform a search ...

htmlparsingseleniumbeautifulsoup

The CSS font-weight attribute can be set to bold or light

I've encountered a strange issue with the font-weight property when applied to a button element. When set to 400, everything functions as expected. However, attempting to set it to either 300 or 500 does not produce any noticeable changes. Interesting ...

htmlcssreactjsfonts

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Exploring the attributes of div elements with XPath

Currently, I am in the process of familiarizing myself with xpath through the creation of a basic program that will display the list of Premier League fixtures in football from a specific webpage. The page in question can be found at the following link: A ...

htmlparsingxpathhtml-parsinghtml-agility-pack

Surrounding the text with background color

My H1 text is in a div that spans multiple lines due to the fixed width of the div. I am looking to set the background color to only appear behind the actual text of the H1, without extending into empty space at the end of each line. In addition, I also n ...

htmlcss

Is there a child missing? If so, add a class

I need to add the class span.toggle if the parent element of li does not have a child ul element. click here to view on codepen Snippet of HTML: <html lang="en"> <head> <meta charset="UTF-8> <title>No Title</title>& ...

javascriptjqueryhtmlcss

Tips for overriding bootstrap.css file in mvc asp.net using Visual Studio

I am currently working on creating a website using Mvc asp.net in Visual Studio 2013. I have integrated my css file, 'style.css', into the project, but I am encountering unwanted white spaces and margins around headers and other key elements, eve ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Transform a Microsoft Word table into HTML code

My boss has provided me with a very detailed table in an MS Word document filled with various colors, shapes, and lots of information that I need to incorporate into a website. I attempted saving the Word file as HTML and then transferring the code over, ...

htmlweb

How can you utilize positioning and margins with Flexboxes?

<template> <div class="flex justify-center"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div class="h-px-500 md:w-1/ ...

htmlcssvue.jstailwind-css

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape. ...

htmlcss

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml