Utilizing the Bootstrap grid system to transform one row with two columns into two separate rows

I'm working on a grid layout that transitions like this https://i.sstatic.net/iU7mi.png

When the width decreases, I want it to look like this https://i.sstatic.net/O5FAd.png

This is what I have so far:

.row > div {
  border: 1px solid black
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-md-6">
   1
  </div>
  <div class="col-md-5">
    <div class='row'>
      <div class="col-md-12">
      2
      </div>
      <div class="col-md-12">
      3
      </div>
    </div>
  </div>
 
</div>

cssbootstrap-4flexboxcss-grid

Answer №1

A recommended approach for implementing CSS Grid layout is to leverage its versatility and customization capabilities.

.grid > div {
  border: 1px solid black;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

@media (min-width: 768px) {
  .one {
    grid-row: 1/3;
  }
}

.three {
  grid-column: 1/3;
}
@media (min-width: 768px) {
  .three {
    grid-column: 2/3;
  }
}
<div class='grid'>

  <div class="one">
    1
  </div>

  <div class="two">
    2
  </div>
  <div class="three">
    3
  </div>

</div>

Answer №2

Is this the correct format?

<div class='row'>
   <div class="col-md-6 col-sm-6">
      1
   </div>
   <div class="col-md-6">
      <div class='row'>
         <div class="col-md-12 col-sm-6">
            2
         </div>
         <div class="col-md-12 col-sm-12">
            3
         </div>
      </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

Tips for wrapping and aligning elements in the center

On my website, I have a layout that displays 10 small images (around 100x200 pixels) evenly spaced at the bottom of the page. | | | The wide window la ...

htmlcss

How to align two buttons in Bootstrap 4 navbar menu to the right side

My layout features two different menus in the navbar, as shown below: https://i.sstatic.net/hYanP.jpg The navbar menu collapses into two separate menu buttons, which is ideal. However, I am trying to align these buttons side by side on the right. How can ...

twitter-bootstrapbootstrap-4

Best practices for displaying output in Python Flask after submitting an HTML form

Embarking on my first web development project, I delved into Flask. Recently, I created a basic temperature converter, running it on my local host. The webpage featured a form input for entering a value, two radio buttons for selecting Fahrenheit or Celsiu ...

pythonhtmlcssflaskpython-requests

Centered Bootstrap navbar logo with left and right aligned navigation items

I am attempting to create a customized navbar using bootstrap. I have been struggling to achieve a design where the logo is perfectly centered with the rest of the elements aligned to the left and right. The current setup looks messy and I would greatly a ...

phpbootstrap-4navbar

Using Jquery slideToggle is creating additional spacing between inline-block divs

I am struggling with displaying a list of cities in an inline format. <div class="accordion-container"> <a href="#" class="accordion-toggle">London</a> <div class="accordion-content"> <p>Inform ...

javascriptjqueryhtmlcssslidetoggle

Navigating Your Way Through the Center (ASP.NET MVC)

My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS? This is the code snippet: <div class="navbar "> <div class="cont ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Hello, I am just starting out with JS. Is there a way for me to customize the position and font of text in this JS Fetch function using CSS? Any help will be greatly appreciated. let file = 'art.txt'; const handleFetch = () => { fe ...

javascriptcss

html - generating a block of code

Does anyone have any tips on creating a block like this one using CSS and HTML: Check out this image for reference I want to streamline the process and make it faster, any suggestions? ...

htmlcssrounded-corners

Guide on setting up and duplicating a template in Vue.js

Allow the user to create multiple person entries by clicking a button with the method "useIt()". A template has been created for this purpose. When the button is clicked, the template should be duplicated and added to the container div. This functionality ...

javascripthtmlcssvue.js

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

I am looking to migrate some classes from Bootstrap 4 to 5 because some of the Bootstrap classes are no longer usable, especially in utilities. I am using SASS so I can utilize @extend for this process. https://i.sstatic.net/dEDCw.png For classes .text-l ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Error occurred during popper installation due to a malfunctioning git command

While attempting to set up popper (a peer dependency for bootstrap), I encountered an error "Error: Command failed: git -c core.longpaths=true config --get remote.origin.url". I have already executed the 'git config --system core.longpaths true' ...

gitnpmbootstrap-4popper.js

Guide to positioning a toolbar within an element when hovering over it in HTML with the help of JQuery

function attachMenuBar() { $('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) { if (this === e.target) { (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.t ...

javascriptjqueryhtmlcss

Straining data in text input fields using bootstrap

Looking for a way to filter data with bootstrap/jquery without using tables, just div rows and columns. Check out an example of how my form looks Here's a snippet of my code: <div class="row"> <div class="col-md-4"> <input class= ...

javascriptjquerybootstrap-4

Creating a gradient border with CSS on the bottom edge

I need help with a design challenge I am facing. I am trying to add a simple 40px height vertical border at the bottom of a Bootstrap 5 navbar, transitioning from color #e5e5e5 to color #fefefe. I have included a sample image for reference: https://i.ssta ...

cssbootstrap-5border

Replicate the cursor to make it show up twice

Is there a way to create a duplicate cursor effect on my website, making it appear twice and perhaps look like it's drunk? I want the cursor to still interact with images and change accordingly, but always have two visible. Can this be achieved easily ...

csscursordoublemouse

Having trouble making `overflow: hidden` work correctly when using padding on an element with `height:

Looking for some coding help here. My aim is to create a customized select menu with a sleek animation effect. I initially decided to set the default height to 0 and use overflow: hidden, then switch it to auto when .active class is applied. But, I'm ...

javascripthtmlcsscss-transitions

Transferring HTML variables to CSS

I've been searching for an answer without much luck. Is it possible to transfer variables from HTML to CSS, maybe using data attributes? I want to display different backgrounds based on vendors using media queries on brand pages. I know inline CSS d ...

csssassshopify

What might be causing the sudden shifts in element positions during TweenLite animation?

I have created a demo of my code in this JSFiddle and also included it below. The issue I am facing occurs in Google Chrome, so I would recommend using that browser to replicate and fix the bug. Please note that the code is a snippet from a larger project ...

javascriptjquerycssanimationgsap

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

Tips for removing a specific shape from an HTML element

After spending 48 hours immersed in the world of clip, clip-path, masking, and all things CSS-related, I find myself unable to crack the code on the following challenge: Imagine a red background filling the body of the page. Layered on top of this is a wh ...

htmlcss