What is the best method to shift the middle div to the top of the CSS layout?

My goal is to create a responsive web page with three divs arranged in one column for small screens and two columns for larger ones. However, the layout doesn't look quite right unless the middle div is moved to the top like this:

https://i.sstatic.net/xR5UC.png

I have a JFiddle example of what I'm trying to achieve: https://jsfiddle.net/usr151/kjz0459a/5/

Can anyone provide guidance on how to accomplish this using CSS (and possibly Bootstrap) in the simplest way possible? I don't have much experience with styling, so any advice or tools would be greatly appreciated.

cssbootstrap-4

Answer №1

<div class="wrapper">
  <div class="row">
    <div class="box3 col-md-6 order-md-2">
      Content 3
    </div>
    <div class="box2 col-12">
      Content 1
    </div>
    <div class="box1 col-md-6 order-md-2">
      Content 2
    </div>
  </div>
</div>

Does this look accurate to you or did you have something else in mind?

Answer №2

To create a responsive layout using Bootstrap, you can utilize the sm/xl classes within a single container:

Here's an example:

.div1 {
  height: 50px;
  background-color: #cffadc;
}

.div2 {
  height: 100px;
  background-color: #cfd4fa;
}

.div3 {
  height: 20px;
  background-color: #faeacf;
}

.container {
  margin-bottom: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
     <div class="div1 col-12 order-1">
      1
    </div>
    <div class="div2 col-xl-7 col-sm-12 order-1">
      2
    </div>
    <div class="div3 col-xl-5 col-sm-12 order-0 order-xl-1">
      3
    </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

Sizing Children in Ant Design Inline Forms

I'm having trouble making my form inline with a select taking up 60% of the space and a submit button taking up the remaining 40%. Every time I try to do this, the select and button end up sizing themselves incorrectly. The select starts out very smal ...

cssreactjsformsantd

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

csstwitter-bootstrapbootstrap-5

designing alternating rows within a table

Can I apply styles to alternating rows in an HTML table using only element hierarchy selectors and avoiding style names? I am tasked with styling the HTML output generated by a server component, which does not include styles for alternate rows. While I co ...

csscss-selectors

Achieving a pulsating SVG animation that functions properly in Internet Explorer

I have an animated SVG that pulses, and while it works in most browsers, it does not function properly in IE. Is there a way to make this animation work in IE without using an animated GIF as a workaround? Check out the code on CodePen <svg version=" ...

javascripthtmlcssinternet-explorersvg

Suggestions for retaining buttons functionality during drag and drop operations using jQuery UI?

My goal is to create new preset buttons when a button is dropped into the "timeslot" div. However, I am struggling to achieve this and ended up creating a function called "init()" which removes all existing buttons and generates new preset buttons every ti ...

javascriptjqueryhtmljquery-uibootstrap-4

CSS animation keyframes failing to initialize

How can I fix my CSS @keyframe animation that is not starting as expected? http://jsfiddle.net/sadmicrowave/VKzXp/ @-webkit-keyframes slideNotificationsHide { 0%{ width:70%; } 100%{ width:94%; left:0; right:0; } } #left-container{ position:abosl ...

cssanimationcss-animations

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

Is it possible for media queries to effectively support mobile devices?

I have a specific requirement for my <input type="number"> element where I need the up and down spinner buttons to be displayed for selecting the next value. However, on mobile devices, these spinner buttons are not visible. To address this ...

htmlcssmedia-queries

Unique background image is assigned to each div sharing the same class

Seeking a way to assign unique random backgrounds to each div with the .item class. Initially attempted using PHP and CSS, for example: <?php $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg ...

javascriptphpjquerycssrandom

sole-child class-based selector

I am trying to target a single div with a specific class using the only-child pseudo-selector. I attempted the following approach: .foo .bar:only-child { background-color: red; } <div class="foo"> <div>1</div> <div class="bar" ...

htmlcsscss-selectors

execute a jQuery function within a data list component

Looking to slide down a div and then slide it back up when a button is clicked. After searching on Google, I found a solution but unfortunately, the slide up function is not working as expected. When the button is clicked, the div slides down correctly but ...

javascriptjqueryhtmlcssasp.net

How can I animate scrolling up or down using jQuery and CSS?

I have a a element that triggers an action when clicked: <a href="#" class="hel" onclick="YPCP1_();">Scroll down</a> Also, function YPCP_(){ var scroll = $(window).scrollTop(); window.scrollTo(0, 600); } The function successfully sc ...

javascriptjqueryhtmlcss

Reactstrap: Keep drop down menu open after an item is selected

In a DropdownItem, there is a search Input that should stay open when clicked to allow the user to type in their search query: import React, { Component } from "react"; import { connect } from "react-redux"; import { Dropdown, Dropd ...

reactjsbootstrap-4drop-down-menureactstrap

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

htmlcss

Tips for dynamically resizing an image to suit any screen size, such as with Bootstrap 4

I am having trouble centering an image on the screen and making sure it fits properly without requiring the user to scroll (on screens larger than a tablet). Here is my desired outcome: https://i.sstatic.net/LbfV8.png The top row shows the expected resu ...

htmlcssimagebootstrap-4scale

Incorporating various vertical divs with 100% height and width

Struggling to achieve the creation of multiple divs with 100% width and height? Here is an example: <html> <body> <div id="wrapper"> <div id="1">100% height & width, all you can see when opening this file!</div&g ...

htmlcss

When adjusting the month/year, the Material Date Picker extends beyond its container

Currently, I have an Angular 18 application with a page that includes a material date picker component. When I open the Date Picker, everything displays correctly. However, when I try to change the month using the left/right arrow or the year, the data co ...

cssangulartypescriptangular-material

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

cssdojoxpagesdijit.form

Disable the ability to select text when double-clicking

Is there a way to prevent text selection on double click while still allowing selection on mouse drag? Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle. UPD: I am not lookin ...

javascripthtmlcsstextselection

Issues with the JavaScript, HTML, and CSS Counter Implementation

Is there anyone who can assist me in making this code (available at https://jsfiddle.net/hmatrix/v3jncqac/) function properly? Purpose: My goal is to develop a counter that increments by specified values. My HTML: <body onload="incrementCount(10)"> ...

javascriptjquerycsscountercountdowntimer