Customize the layout of columns on Desktop and rearrange columns for mobile responsiveness with the help of Bootstrap 4

Can anyone assist me in solving the following scenario using Bootstrap 4 alpha version?

I have different layouts for Desktop and Mobile devices.

For Desktop, the layout appears as follows:

.............................................
. ------------- ------------- ------------- .
. .  1        . . 2         . .   3       . .
. .  Col-4    . . Col- 4    . .           . .
. ------------- ------------- .  Col-4    . .
. --------------------------- .           . .
. .   4                     . .  With     . .
. .   Col-8                 . .  some     . .
. .                         . .  height   . .
. .                         . .           . .
. --------------------------- ------------- .
.............................................

For Mobile, the layout is as shown below:

...............................
. --------------------------- .
. .   1                     . .
. .   Col-12                . .
. --------------------------- .
. --------------------------- .
. .   2                     . .
. .   Col-12                . .
. --------------------------- .
. --------------------------- .
. .    3                    . .
. .   Col-12                . .
. .                         . .
. .   With                  . .
. .   Some                  . .
. .   Height                . .
. --------------------------- .
. --------------------------- .
. .   4                     . .
. .   Col-12                . .
. .                         . .
. .                         . .
. .                         . .
. --------------------------- .
...............................

I attempted to use pull and push without success.

I am looking for a CSS-only solution for this issue.

Although I have a JavaScript solution, it requires re-initializing the 3rd column which is a heavy component.

Here is my current implementation: Fiddle

cssbootstrap-4

Answer №1

Flexbox was introduced with alpha 6, so transitioning to beta wouldn't have a significant impact in this scenario (despite the changes in class names from alpha-6 to beta). The stable version of Bootstrap 4 was released on 1/18/18.

When using flexbox, the columns within each row maintain equal height, which may not align with your intended desktop layout. To achieve the desired positioning on larger (md) screens, you can apply d-md-block to the row element to override display:flex. Subsequently, utilize float-left and float-right for column placement on desktops. On smaller screens, the flexbox behavior will prevail, disregarding floats and stacking columns vertically as expected.

Visit this link for reference implementation

<div class="container-fluid">
  <div class="row h-100 d-md-block d-flex">
    <div class="col-12 col-md-4 float-left">
      1 A snippet of content
    </div>
    <div class="col-12 col-md-4 float-left">
      2 More content is placed here
    </div>
    <div class="col-12 col-md-4 special-height float-right">
      3 Additional content displayed differently
    </div>
    <div class="col-12 col-md-8 special-height-small mt-2 float-left">
      4 Unique content designed explicitly
    </div>
  </div>
</div>

Answer №2

Here is an example of how you can structure your HTML code:

<div class="row">
   <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Section 1</div>

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Section 2</div>

       <!-- Only Visible For Mobile And Tablets -->
      <div class="col-sm-12 col-xs-12 hidden-lg hidden-sm">Section 3</div>

      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Section 4</div>
   </div> 

    <!-- Only Visible For DeskTop -->
   <div class="col-lg-4 col-md-4 hidden-sm hidden-xs">Section 5</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

What is causing the issue with the italic font not displaying properly?

I am currently learning CSS. I attempted to make a portion of my text italicized, but for some reason, the text refuses to adopt the desired style. Any ideas on what might be causing this issue? .bold { font-weight: bold; } .italic { font-weight: i ...

htmlcssfonts

"Struggling to position the bottom navbar at the center in Bootstrap?

Can someone help me center the icons in my second navigation bar? I've tried aligning them left and right, and that works, but when I try to center them, it doesn't work at all. Did I miss something in the code or make a mistake? Any assistance w ...

htmlcssbootstrap-4navbar

CSS and image directories starting point

Struggling to set up CakePHP 1.3 on WAMPserver. The issue lies in the fact that my CSS cannot be located at localhost://dreamdeal/css/generic.css. Is there a way to properly define the root path in my webroot/index.php? I attempted to do so with this co ...

csscakephp-1.3

Looking for assistance in resolving a CSS issue on Google Chrome and Safari browsers

My friend needs some assistance with his website that is currently in development: When viewing the website in Firefox, everything looks fine. However, when using Chrome or Safari, there is a strike-through bug appearing in the product description as show ...

csswebkit

The Bootsrap modal fails to open when triggered by a different button

Why does the login button open a signup modal instead of a login modal, even though they are configured in the same way? I renamed the login button to 'loginModel', but it still doesn't work as expected. However, the sign-up button works cor ...

phphtmlcssbootstrap-4bootstrap-modal

Script and Ajax loading repeatedly, causing multiple instances of script and Ajax loading

I recently encountered some unexpected issues while debugging and playing around with the code on my website, . Let me walk you through the scenario to understand the problem better. When you click on the "art" tab, two logs appear in the console - one sho ...

javascriptjqueryhtmlcssajax

The z-index remains in limbo until the transition is complete

Exploring the concept of "folding" elements through the use of rotate3d(), I encountered an issue with only one side of my fold. During the animation, the z-index seems to be ignored, but suddenly jumps to the top at the end. My suspicion lies in the z-axi ...

csscss-transitionsz-indexcss-transforms

What are some ways to ensure that text can adapt to the size of a

I am looking to create dynamic text that adjusts based on the size of its parent container. As the parent container's size changes, I want the text to automatically adjust accordingly. Specifically, I want the text in a widget to resize when the widg ...

javascriptjqueryhtmlcssfrontend

What is the best way to navigate through individual child elements within a parent container that is scrollable?

I'm currently working on a unique user interface that features a scrolling list of options. The goal is for users to easily find and select the option they are looking for by simply scrolling or swiping. However, I've encountered an issue where ...

javascripthtmljquerycssscroll

What is the method for generating a 4-digit input sequence without the use of JavaScript?

When I enter a four-digit number (verification code) in the form input, the structure of the PIN-code breaks down after entering the fourth digit. The text pointer moves to the fifth character even though I have defined only four characters. Is there a CS ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Tips for creating a dynamic div slider

I've successfully created an admin page that features a slider within the main content. While I've managed to style everything accordingly, implementing the slider functionality has proven to be a challenge for me. Can anyone provide guidance on ...

jqueryhtmlcsstwitter-bootstrap-3slider

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

I want to create a transition effect on the parent div when the child div disappears without using display:none My goal is to have a dynamically centered div that animates using CSS transitions only. Here is my current approach. document.querySelector ...

htmlcsscss-transitions

Tips for aligning an icon in the middle of the Bootstrap 3 grid vertically

Struggling with vertical centering an icon at the end of a list item. The goal is to vertically center the right arrow on the page. Using Bootstrap 3, Angular-UI bootstrap JS, and AngularJS. Current code snippet: <style> .center { display: in ...

htmlcsstwitter-bootstrap

Ensure that the element fits within the container without increasing in size

My current challenge involves solving a seemingly simple problem. Imagine I have a layout consisting of a header, content, and footer. Within the content section, there is a row of items that fill all available space. Each item has equal width and contains ...

cssflexbox

The inline div behaves like a block element when it contains block input buttons

I'm struggling with CSS, but I have a vision of creating two select lists with a button panel in between to facilitate moving selected items back and forth. Here's a visual representation of what I am aiming for: +----------------------+-+ ...

htmlcss

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

Implementing Update and Delete Features for Database Rows in Repeater

I have a repeater set up to extract and display data from a SQL Server database. Each row in the database has corresponding buttons added to it. Below is the code used to populate the repeater: SqlConnection connR; string connectionStringR = Configu ...

c#htmlcssasp.netsql-server

Developing HTML functionalities within the OneNote Add-in API

I have developed my own OneNote Add-in using Nodejs, but I am encountering two issues that I have been unable to resolve despite extensive research. The add-in I created adds a new outline to a OneNote page, which includes an HTML table with one column an ...

htmlcssnode.jsoffice-jsoffice-addins