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

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

csshtmlcss-position

Comparison between Filament Group's loadCSS and AJAX technologies

The loadCSS library developed by Filament Group is widely recognized as the standard for asynchronously loading CSS. Even Google recommends its use. However, instead of using this library, some suggest utilizing ajax to achieve the same result. For example ...

javascriptcssajaxperformance

Unable to modify jwplayer css styles to customize the chromecast icon

Is there a way to customize the chromecast icon within the JWPlayer skin to have a specific color? I've identified that the styles I need to change are --connected-color and disconnected-color when inspecting the element. Despite my attempts through ...

csssassjwplayerchromecast

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

javascripthtmlcss

Tips on how to toggle the class of one specific element without affecting others

Whenever I click on a div, it expands. However, if I click on a collapsed one, both collapse and the first one returns to an inactive state. At this point, the last two are in both active and inactive states. And if at this time I click on the first one, t ...

javascriptjqueryclasshtml

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

javascripthtmlangularangular-materialmaterial-design

Problem with ineffective responsive CSS on mobile devices

Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take ...

htmlcss

Struggling to center a div within another div using margin auto

Hey there, I'm looking for some help with my code. Here's what I have: .center{ width: 100%; margin: 0 auto; border: 1px solid red; } .nav{ background: #606060; width: 90%; } HTML <!DOCTYPE html> <html> < ...

htmlcss

Having trouble keeping the HTML text centered within the div on a responsive layout

Having an issue with keeping text centered in the middle of a div that overlaps an image. It looks fine on desktop but when I try to make it mobile-friendly, things go haywire. I believe the problem lies in using fixed heights for the div, as setting heigh ...

htmlcsstextalignment

Enhancing the appearance of a JSX component in React

I have a segment of code within my project that calculates a specific percentage and displays it on the dashboard. <text className="netProfit-circle-text" x="50%" y="50%" dy=".2em" textAnchor="middl ...

javascriptcssnode.jsreactjsecmascript-6

Converting HTML to plain text using the DOMDocument class

Is there a way to extract the text content from an HTML page source code, excluding the HTML tags? For example: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu"/> <titl ...

phphtmldomdocument

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

htmltypescriptckeditorangular2-forms

Is there a way to update the href attribute within the script section in vue.js?

I need to dynamically set the href attribute of a link based on data retrieved from a database and rendered in the methods section. <template v-if="header.value == 'ApplicationName'"> <a id="url" href="#" target="_blan ...

javascripthtmlvue.jsdatatablevuetify.js

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

javascripthtmlwebgl

Issues with escaping HTML encoding

Currently working on an Android app that involves querying a webservice and receiving a JsonObject. Once I have the desired String, I encounter characters like: est&amp;aacute; I've experimented with two methods: StringEscapeUtils.escapeHTML4(te ...

htmlencodingescaping

Gone Without a Trace: Where Did the WP Admin

I am brand new to creating WordPress themes and I have just started working on my very first one. I have managed to get some content up and running, and the home page is functioning properly. However, when I log into WordPress and view the site, I noticed ...

phphtmlwordpress

Steps for Converting Unicode Characters to HTML Encoding in C++

Can you assist me with converting unicode characters like the ones below in C++? Thére Àre sôme spëcial charâcters ïn thìs têxt عربى I need to convert them to HTML encoding as shown below: Th&eacute;re &Agrave;re s&ocirc;me sp&am ...

htmlc++encoding

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Is there a way to adjust both the width and height of the <v-text-field>tag? I attempted to modify it using .css, but it seems to only affect certain parameters, leaving large white spaces on my page. This is the method I have tried so far: <te ...

cssvue.jsvuejs2vue-componentvuetify.js

Transforming Symbol Characters into HTML Using VB.NET

I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...

htmlvb.netcharacter-encoding