How can I align two responsive rows side by side in Bootstrap 3?

Utilizing Bootstrap 3, I'm faced with a challenge to achieve the layout depicted in the image. I have set up one row with two columns, positioned next to each other as shown; however, upon resizing to mobile view, I want the right column to drop below the left. Any assistance on this matter would be greatly appreciated. Thank you. https://i.sstatic.net/QqNXd.png

Here is my code snippet for reference:

<div className="container">
  <div className="row">
    <div className="col-xs-4 col-offset-xs-1">
     <h1>1</h1>
  </div>
  <div className="col-xs-4">
    <div className="row">
      <h1>2</h1>
    </div>
  </div>

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Utilize the most recent compiled and condensed CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 black">
          black
        </div>
       </div>
     </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 red">
          one
        </div>
       </div>
      <div class="row">
        <div class="col-xs-12 red">
          two
        </div>
       </div>
      <div class="row">
        <div class="col-xs-12 red">
          three
        </div>
       </div>
     </div>
    </div>
  </div>

Answer №2

Utilizing Bootstrap for nesting elements is a breeze - check it out: https://jsfiddle.net/denea/DTcHh/25594/


      <div className="container">
          <div class="row">
            <div class="col-sm-6 col-xs-12" id="first">
               <h1>1</h1>
            </div>
            <div class="col-sm-6 col-xs-12" id="second">
              <div class="row">
                <h1>2</h1>
              </div>
              <div class="row">
                <h1>3</h1>
              </div>
              <div class="row">
                <h1>4</h1>
              </div>
            </div>
     </div>

For more details, refer to this guide: http://getbootstrap.com/css/#grid-nesting

Answer №3

Utilizing Bootstrap's grid nesting feature can fulfill your requirements:

<div class="row">
  <div class="col-sm-6">
    Left column
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-12">
        Right column, row 1
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        Right column, row 2
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        Right column, row 3
      </div>
    </div>
  </div>
</div>

For more information, click here.

Answer №4

To accomplish this, utilize flexbox along with a media query

 @media (max-width: 480px) {
    .container > .row {
          display:flex;
          flex-flow: row-reverse wrap;
    }
 }

See it in action here: https://example.com/demo

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

Dynamic Divider for Side-by-Side Menu - with a unique spin

I recently came across a question about creating responsive separators for horizontal lists on Stack Overflow While attempting to implement this, I encountered some challenges. document.onkeydown = function(event) { var actionBox = document.getElementB ...

javascripthtmlcss

Design a hover zone that allows for interaction without disrupting click events

I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...

javascripthtmlcsssvgmouseevent

How to Exclude Specific Div from CSS Stylesheet Styling

Currently, I am utilizing the bootstrap CSS framework for a specific page on my website. The issue arises when the CSS styling included in Bootstrap interferes with the formatting of my sidebar by changing its color, font size, and font family. Is there a ...

htmlcsstwitter-bootstrap

Creating CSS with rounded borders, precise sizing, cleverly placed white space, and smooth anti-

After experimenting with a simple css scenario for creating a card style layout, I noticed that it looks fine on my 22-inch monitor but appears distorted on my Samsung TV with a resolution of 1920x1080. There seems to be a white gap in the border due to an ...

cssborder-layout

What is the best way to add a data value to a dynamically generated div element?

I've been struggling to link a data value with a dynamically created div, but so far I haven't had any success. I've searched online for solutions, but I can't find any examples that fit my specific issue. If anyone has any advice, I wo ...

javascriptjqueryhtmlcss

Exploring the benefits of utilizing Scoped CSS for individual components within Next.js version 13

Switching from a Vue.js background to starting with Next.js, I want to scope my CSS for each component such as Navbar instead of using it inside Globas.css. Is there a way to achieve this? I am also utilizing the Tailwind CSS library. I attempted creatin ...

cssreactjsnext.jsvuejs3next.js13

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

htmlcssbootstrap-4

What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors): I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code. HTML ...

css

Display a modal in Django using Bootstrap upon page load with a fade effect

Currently, I am facing an issue while using a modal for a small form. My objective is to have the background faded when the modal opens, and also when the page loads with the modal already visible (for cases like form errors). <div class="modal {% if ...

djangotwitter-bootstrapmodal-dialog

Tips for aligning a flex element child vertically

I am trying to achieve a layout where there are 3 divs vertically centered in one flex container with flex-direction:column. However, I need the 3rd div to be positioned at the bottom of the container. To better illustrate what I am looking for, you can v ...

cssflexbox

Setting the minimum height of a wrapper to 100% may cause the

I am experiencing an issue with my website where the repeating background on a wrapper that acts as the background for the nav-bar is not extending all the way down the page as intended. I tried setting the min-height of the wrapper to 100%, but for some r ...

htmlcss

Ways to ensure child element takes up the entire screen

Here is the layout I am working with: <ul class="all-content white-bg"> <row> <div class="col-md-3"> <!-- Content --> <div class="content white-bg fullscreen clearfix"> < ...

jquerycsshtmltwitter-bootstrap

Image failing to align properly within div container

When attempting to align an image in the middle vertically inside a DIV on my website, it does not work properly. This issue does not occur when I do it on jsFiddle. It appears there may be a CSS conflict that I am unable to identify. I have applied the s ...

htmlcssvertical-alignment

Customizing Semantic UI Navigation Menu Styles

For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here: To display my header, I am using the following code: <Menu className='header' > <Containe ...

cssreactjssemantic-uisemantic-ui-react

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

htmlcssflexboxsemantic-ui

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Ensure that the chart.js doughnut remains centered in its container with a fixed width and height

I'm currently utilizing the aurelia plugin for chart js to create a dynamic Doughnut chart. I have disabled the responsive feature for the chart so that it maintains a fixed width and height regardless of screen or device size. However, I am facing an ...

javascripthtmlcsschart.jspie-chart

Issue: Spaces are not being displayed between items in the @Html.DisplayFor statement within the Foreach

I have encountered a few similar queries on this platform and attempted the suggested solutions, but unfortunately, they did not resolve my specific issue. Within my view, I am using @Html.DisplayFor in a Foreach loop to display all GroupIDs in a particul ...

javascriptjqueryhtmlcssasp.net-mvc

Tables are being tampered with by Chrome

I'm facing an issue where my website appears fine in FireFox (screenshot), but the tables get messed up in Chrome (screenshot). I've gone through my html and css validation and tried various solutions, but I'm completely lost on how to ...

htmlcssgoogle-chrome

The alignment of rows and containers within the navbar is experiencing some issues

I'm currently working with Bootstrap 4 in my project. I've noticed that when I place a container inside a navbar and a row inside that container, the row doesn't stretch to take up the full width of the container as expected. Could it be tha ...

htmltwitter-bootstrapbootstrap-4