Arrangement of Columns in Bootstrap 4 - Three Columns Aligned Vertically on the Left, One on the Right

My goal is to achieve a Bootstrap 4 layout like the one shown in the image linked below:

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

For large devices, I want the Search Form, CTAs, and Button ads to be arranged vertically in a column that spans 4 units, while the Content will take up the remaining space on the right side (with variable content that can expand downwards).

On small devices, I need the Search Form, CTAs, Content, and Button ads to stack in that order, taking up the full width of the screen.

I've attempted to use grid ordering classes to achieve this layout, but I'm facing difficulties specifically with getting the Content to align beside the other items rather than below them. The code snippets I've tried are provided below:

This question appears to address a similar issue, but it mentions the absence of push/pull classes?

Here are my attempts at the code:

<div class="row align-items-start">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="w-100"></div>

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div class="w-100"></div>

  <div  class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div> 






<div class="row ">

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: red;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: blue;"></div>
  </div> 

  <div class="col-md-4">
    <div style="height:50px;width:100%;background-color: green;"></div>
  </div> 

  <div style='float:right;' class="col-md-8 offset-md-4">
    <div style="height:50px;width:100%;background-color: yellow;"></div>
  </div> 

</div>

csshtmlbootstrap-4

Answer №1

To optimize layout on different screen sizes, consider disabling flexbox (d-md-block) and utilizing floats for columns at larger screen widths. Then, utilize flexbox properties like order-* for smaller or mobile screen widths.

<div class="container-fluid">
    <div class="row d-md-block">
        <div class="col-md-4 float-left">
            <div style="height:50px;width:100%;background-color: red;">A</div>
        </div>
        <div class="col-md-8 float-right order-1">
            <div style="height:150px;width:100%;background-color: green;">C</div>
        </div>
        <div class="col-md-4 float-left order-0">
            <div style="height:50px;width:100%;background-color: blue;">B</div>
        </div>
        <div class="col-md-4 float-left order-last">
            <div style="height:50px;width:100%;background-color: yellow;">D</div>
        </div>
    </div>
</div>

Link to example

Related:

Customizing Bootstrap order on mobile version
Additional code example

A-B-C-D A-C-B-D

Answer №2

Here is one way to accomplish it:

.top{
    background-color: yellow;
    height: 50px;
}

.left-side{
    width: 100%;
}

.first{
    background-color: aqua;
}
.second{
    background-color: green;
}

.third{
    background-color: aquamarine;
}



.content{
    height: 300px;
    background-color: grey;
    width: 100%;
   
}

.show-on-small{
    display: none;
}

@media only screen and (max-width: 768px) {
    
     .show-on-small{
        display: block;
    }

    .hide-on-small{
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="sty.css">
</head>
<body>

<div class="container-fluid"> 

    <div class="row">
        <div class="col-12 top">
            MD Desktop
        </div>
    </div>

    <div class="row">
 
        <div class="col-md-4">
            <div class="left-side first">SEARCH FORM</div>
            <div class="left-side second">CTAs</div>
            <div class="left-side third hide-on-small">BUTTON ADS</div>
        </div>
        
        <div class="col-md-8">
            <div class="content">CONTENT</div>
        </div>
        
        <div class="col-md-4 show-on-small">
                <div class="left-side third">BUTTON ADS</div>
        </div>
          
    </div>
</div>
    
</body>
</html>

Answer №3

To customize the order of items in flexbox, utilize the order property. You can adjust the ordering based on different screen sizes using media queries. For further information, check out this resource.

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

Navigating intricate JSON information using AngularJS

I am working on displaying JSON data in an HTML form using ng-repeat. I have managed to retrieve data from some objects, but I am facing challenges due to the nested structure of objects like "Obj => Obj => Obj". In the JSON object provided below, I ...

htmljsonangularjs

The Server Side does not recognize JavaScript values when transferred to HTML

Here is the function I've created for the onchange event: This is my Javascript code: function optionsModel() { var x = document.getElementById("model"); var option = document.createElement("option"); var makeValue = documen ...

javascriptc#htmlasp.net

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

"Create a sleek, modern navbar with a transparent background and customizable

My current issue involves the transparency of my navbar. Specifically, I am trying to achieve a non-transparent look for the links when the site is viewed on mobile devices. Here is the problem that I am facing on mobile devices. https://i.sstatic.net/cc ...

htmlvue.jsbootstrap-4navbar

What is the reason behind the incompatibility of css background-size/position with the shorthand background url?

I had been working on a concept for a slideshow or single-page website and reached a good stopping point. Since I had outlined my idea on a JSFIDDLE, I decided to tidy up my CSS. Each of the 5 tabs used similar lines of CSS except for the background image. ...

htmlbackgroundbackground-positioncss

Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its ...

htmlcss

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5

Trouble with Two Divs Layout

My website layout includes links on the left side of the page within a floating div, with content on the right side in another floating div. However, I'm facing an issue where the content moves below the links when the page is resized. I attempted to ...

csshtml

The necessary parameters are not provided for [Route: bill] [URI: bill/{id}]

I'm having trouble locating the error in my code. Here is my controller: public function editBill(Request $req) { $customerInfo=Customer::where('id',$req->id)->first(); $billInfo=Bill::where('id',$req->id)->get( ...

phphtmllaravel

Redirecting mobile devices to a specific URL using htaccess

I have set up a duplicate of my mobile website at m.website.com that contains mobile-friendly content. However, there are still some desktop pages for which I have not created a mobile version, and I do not want to redirect them to the mobile site. Is the ...

html.htaccessmobile

"Troubleshooting a Responsive Design Problem: Horizontal Scroll Bar Appears on Low Res

My website is experiencing an odd issue with responsiveness. When viewed on desktop resolution in Chrome, there is no horizontal scroll. However, when I resize the browser to lower resolutions (400px width and less), the horizontal scroll appears. It see ...

csswordpressresponsive-design

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

Hello there! I am just starting to learn about Bootstrap and I'm excited to create a responsive layout that will be centered on the page

I am aiming for this specific layout design. https://i.sstatic.net/JHvSY.png Here is the current code snippet that I have: <div class="container"> <h2 class="title mt-3 mb-4">Title</h2> <div class="container"> <div ...

angularlayoutbootstrap-4grid

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

Retrieve the names of all classes listed in the internal stylesheet

Is there a way to extract the names of all classes defined in an internal stylesheet using jQuery? For example, if I have the following internal stylesheet: <style id="custstyle" type="text/css"> .column{ font-size:13px; ...

jquerycss

Stop mega menu items from disappearing when hovered over

I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear. Here is the HTML code snippet: <li class="dropdown mega-dropdown m ...

javascriptjqueryhtmlcssbootstrap-4

What is the syntax for indenting text inside an inline-block element?

Essentially, the checkboxes displayed here are in a graphical format to avoid using checkbox elements for accessibility reasons (only the link should be interactive). However, aligning a span next to an href and indenting the text to line up with the star ...

css

Displaying the content of a Bootstrap 4 row on top of the navbar

Just starting out with Bootstrap and recreated a page layout similar to the starter template on the Bootstrap website. However, I'm facing an issue where the row content overlaps the navbar, despite using the align-items-center utility class on the ro ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

How can CSS incorporate the color of a different class?

Is it feasible to reference a color from one CSS class to another? Or generate a universal color definition that can be applied to multiple classes, eliminating the need to update in various places when changing a color? For instance, if I have a CSS clas ...

csstwitter-bootstrapbootstrap-4css-variables

Pass the model variable to the `url()` method within the background attribute of the `<style>` HTML tag

I am having trouble passing the location of a static image to the url() attribute of a background image within the style property of a jumbotron div tag. I've experimented with different solutions, examples are as follows: Here is a snippet from my ...

pythonhtmldjango