Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout?

<div class="row">
    <div class="col-xs-12 col-lg-3 col-lg-push-9">
        navigation
    </div>
    <div class="col-xs-12 col-lg-9 col-lg-pull-3">
        content
    </div>
    <div class="col-xs-12 col-lg-3 col-lg-offset-9">
        sidebar
    </div>
</div>

XS Layout:

navigation
---
content
---
sidebar

LG Layout:

content    | navigation
           | sidebar

Fiddle:

http://jsfiddle.net/Pn8r4/

htmlcsstwitter-bootstrap

Answer №1

Why not try changing the positioning of the .c-g (content) column to absolute for larger screens?

@media (min-width: 1200px) {
    .c-g {
        position: absolute;
    }
}

See Example

Remember, you can also utilize Bootstrap variables for defining screen widths in LESS:

@media (min-width: @screen-lg-min) { ... }

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 getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

htmlcssreactjsmaterial-ui

Minimize the empty space at the top of the website

Looking to eliminate the extra space at the top of this particular website. After attempting to use firebug, I still can't pinpoint the source of this unwanted spacing. Your guidance would be greatly appreciated. Thank you! ...

css

What is the best way to ensure that the width of dropdown menu items corresponds precisely to the width of the content

I have implemented the Reactstrap drop-down menu: import React from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; export default class DropDownTest extends React.Component { cons ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

Displaying Text and Images on a Sliding Carousel with a Static Background Image

I am currently experimenting with the Materializecss Image Slider. My goal is to have a fixed full-screen background image while the texts and images slide over it. Initially, I tried setting the background-color of the slider class as transparent, but un ...

javascripthtmlcssslidermaterialize

Set a default selection for radio buttons in Angular template-driven forms

I'm having an issue with setting a default selection for a radio button in my template-driven form. Here's the relevant part of my code: <div class="donut-form-promos"> <span>Promo:</span> <div class=&quo ...

htmlcssradio-buttonangular2-templateangular-forms

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver

What is the best way to align a Font Awesome icon within an SVG circle?

Can anyone help me position the trophy inside the circle, just below the number 2000? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e352835 ...

htmlcssbootstrap-5font-awesome

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

javascriptphpjqueryhtml

Ways to create a responsive design for this specific part of the

https://i.sstatic.net/2JyyN.jpg Hello everyone, I'm looking to make this section responsive at 768px .AppleContent { background-color: #9ACD32; text-align: center; padding: 50px 200px; color: white; } <section class="section-1"& ...

htmlcssresponsive-designbootstrap-4

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

javascripthtmlcss

Create a personalized message in PHP that corresponds to the specific row number

I created a table to show data sourced from a database. I decided to add a column that will display a message based on the row number being displayed. <form name="afisare1" method="POST" > <input type="submit" name="opt1" value="OK"/> ...

phphtmlmysql

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

What is the best way to make a container 100% tall and display a navigation bar?

Struggling to properly render my React page This is what I have: ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router /> </Provider> </React.StrictMode>, document.getEl ...

javascripthtmlcssreactjs

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this? #clockPosition { margin: auto auto 0 auto ...

htmlcss

Navigating the website with curtain.js and anchor tags

Currently, I am working on a website located at www.TheOneCraft.co.uk. I have incorporated the curtain.js jQuery plugin to create animated slide/pages as users scroll down. However, I have been unsuccessful in making the navigation bar follow this animati ...

javascriptjqueryhtmlcss

Text cannot be highlighted within DIV element

Check out this page and this page on my website. Text within the advert DIV tag cannot be selected, and some text in the Incinerator product page is unselectable in the topic-div above the iframe element containing a YouTube video. Here is the relevant HT ...

csshtml

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

htmlcssbootstrap-4grid-layout

AngularJS shows an error when attempting to access the property 'childNodes' of an undefined element

Recently diving into AngularJS, I incorporated bootstrap validator to ensure form validation in my project. Initially, everything was running smoothly until I introduced the following snippet into my controller's JavaScript file for validation: $(doc ...

angularjstwitter-bootstrapvalidation

Arranging based on attribute data

I'm currently working on organizing a collection of divs that have unique custom data attributes which I aim to sort based on user selection. For instance, if 'followers' is chosen, the .box elements will be arranged according to their data- ...

javascriptjqueryhtmlcustom-data-attribute