Using Rowspan in Bootstrap 4 Beta 0 Grid System

Hey there, currently I'm working on an eCommerce template using Bootstrap 4 Beta. While I managed to get it working smoothly on mobile devices, I've run into a snag on desktop. I can't seem to figure out how to keep the Buy Box positioned under the title; right now, it's showing up below the Gallery section.

Here's how I envision it looking on desktop: https://i.sstatic.net/Cp970.png

And here's the desired layout for mobile: https://i.sstatic.net/IPbQg.png

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-1 d-none d-md-block"></div>
        <div class="col-xl-10 col-12">
           <div class="row">
               <div class="col-xl-6 order-xl-1 col-12 order-2 d-flex">
                   Gallery
               </div>
               <div class="col-xl-6 order-xl-2 col-12 order-1">
                   Title
               </div>
               <div class="col-xl-6 order-xl-3 col-12 order-3">
                   Buy Box
               </div>
               <div class="col-12  order-xl-4  order-4">
                   Description
               </div>
               <div class="col-12  order-xl-5 order-5">
                   Related
               </div>
           </div>
       </div>
       <div class="col-xl-1 d-none d-md-block"></div>
    </div>
</div>
htmltwitter-bootstrapcssresponsive-designbootstrap-4

Answer №1

To ensure the "Best Buy" box moves under the title in case the gallery height is taller, you can utilize util classes to float the cols on xl widths.

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-1 d-none d-md-block"></div>
        <div class="col-xl-10 col-12">
           <div class="row d-xl-block d-flex h-100">
               <div class="col-xl-6 order-xl-1 col-12 order-2 order-xl-1 d-flex bg-warning tall float-left">
                   Gallery
               </div>
               <div class="col-xl-6 order-xl-2 col-12 order-1 bg-primary float-left">
                   Title
               </div>
               <div class="col-xl-6 order-xl-3 col-12 order-3 bg-primary float-left">
                   Buy Box
               </div>
               <div class="col-12 bg-info order-4 float-left">
                   Description
               </div>
               <div class="col-12 bg-info order-5 float-left">
                   Related
               </div>
           </div>
       </div>
       <div class="col-xl-1 d-none d-md-block"></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

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

javascriptcssanimationzoomingpan

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

javascripthtmljqueryajax

Ensuring the positioning of input fields and buttons are in perfect alignment

I've been struggling to align two buttons next to an input field, but every time I try, I end up messing everything up. I managed to align an input field with a single button, but adding a second button is proving to be quite difficult. Here is ...

htmlcssangularjs

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

javascriptcssnode.jselectron

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

javascripthtmlcssreactjs

Guide to quickly redirecting all 404 links to the homepage on a simple HTML website

Is there a way to automatically redirect clients to the homepage if they click on a broken link in a basic HTML website, instead of displaying a custom 404 page? UPDATE: My website consists of only 5 plain HTML pages hosted on GoDaddy. There is no server- ...

javascripthtmlajaxhttpbrowser

Angular expands the HTML of the parent component

Although this question may be old, I am still struggling to find a straightforward answer and it just doesn't make sense to me. I have a main component with its own HTML and several components that inherit from it. Here is what I am trying to achiev ...

htmlangulartypescript

What is the best way to merge two JSON values with the help of jQuery?

Two JSON Objects are provided below: The first one is: [{ "id": 5001, "count": "0", "type": "None" }, { "id": 5002, "count": "0", "type": "Glazed" }, { "id": 5005, "count": "0", "type": "Sugar" }, { "id": 5003, ...

jqueryjsonhtml

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

javascriptjqueryhtmlcss

Arranging List Items within a Container

What's the best way to align three different elements within a div? The elements are structured in an unordered list: Left, Center, and Right. I attempted to float the right element using float: right, and applied margin: 0 auto with a set width for ...

htmlcssweb

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

javascripthtmljsond3.js

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

csssassgulpautoprefixer

A-Frame VR: Image missing from display on Chrome browser

UPDATE: I discovered that the issue was caused by running the HTML file from my local hard drive instead of a web server. Once I uploaded it to my web server and ran it from there, everything worked perfectly. A-Frame Version: 0.4.0, Chrome: 55.0.2883.87, ...

javascripthtmlaframewebvr

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

javascriptcssangular

Tips for preventing the hard coding of option values or inner HTML within a select menu when working on CS50 Finance

<select name="symbol"> {% for row in stocks %}} sym = row["symbol"] <option value=sym>sym</option> {% endfor %} </select> The current code snippet above displays a drop-down menu populated with stock symbols from a ...

htmlflaskjinja2

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

javascriptjquerycssanimationonclick

"Animating dynamic elements based on conditions in React: A step-by-step

I am currently working on a React application where I am using React Spring for animations. However, I am facing some difficulties in animating certain elements. The primary animation I am experimenting with is a simple opacity transition. i ...

cssreactjsanimationbootstrap-4react-spring