Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this:

[blurb] (8) [form] (4)

However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices.

On smaller devices, the layout currently looks like this:

[blurb] (12)
[form] (12)

My goal is to have the [form] displayed above the [blurb] on smaller devices, making it look like this:

[form] (12)
[blurb] (12)

I've been trying to use push/pull classes to achieve this, but I can't seem to get it right. Any assistance on this issue would be greatly appreciated.

csstwitter-bootstrap

Answer №1

Consider a mobile-first approach when designing your layout. This means structuring your HTML so that important elements like forms come before less crucial elements like blurbs on smaller devices. Then, using push and pull classes in Bootstrap, you can easily rearrange the order of these elements on larger screens.

<div class="row">
    <div class="col-sm-8 col-sm-push-4">form</div>
    <div class="col-sm-4 col-sm-pull-8">blurb</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

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

javascriptjquerycssajax

How to handle CSS line wraps: enlarge the second line or determine the number of words per line specifically?

Is it possible to use CSS to control line wraps? I would like to have lines with a similar amount of words per line, or at least avoid one-word lines. Original: A few words for a very long title that will probably span two lines Desired Outcome: A few ...

htmlcss

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

What is the current importance of CSS3 vendor prefixes?

I've been pondering the importance of specifying vendor prefixes like 'webkit', 'moz', 'ms' or 'o' in modern CSS. It seems that Opera has switched to Webkit, meaning we may no longer need '-o-'. IE10 e ...

cssbrowsercross-browservendor-prefix

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

htmlcss

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

Mobile navigation bar with Bootstrap transparency

I recently encountered a challenge with my Bootstrap navbar where I needed to remove the background. To achieve this, I applied the class "navbar-fixed-top" to the main wrapper. <nav class="navbar navbar-fixed-top"> After making this change, the na ...

jqueryhtmlcsstwitter-bootstrap

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

phphtmlcsswordpress

Center a single div vertically within a parent div by utilizing a fluid layout

Attempting to align text elements within a responsive layout presents challenges due to the fluid nature of <div> sizes. I recently discovered a fantastic method for horizontally and vertically centering a child <div> inside its parent <div ...

htmlcsscenteringfluid-layout

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div><!--Contains a button --></div> <div><ul>..<!--Contains a list -->...</ ...

jqueryhtmlcssjquery-mobile

Ways to switch sidebar menu using only CSS?

How do I create a BS4 sidebar menu that toggles on click and replaces an icon? See the code below: .toggle { display: none; } .menu-head label { color: black; cursor: pointer; } .container { overflow: hidden; display: inline-block; } .si ...

htmlcssbootstrap-4sidebar

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

Creating an intricate table layout using AngularJS and the ngRepeat directive

I'm attempting to create a table similar to the one shown in the image below using HTML5. https://i.sstatic.net/DiPaa.png In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes ( ...

javascripthtmlcssangularjshtml-table

Elements within the DIV tag are not displaying in a linear arrangement as intended

I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...

htmlcsstwitter-bootstrapbootstrap-4

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

jqueryhtmlcss

After applying the cellClass in ng-grid, the row border mysteriously disappears

After applying cellClass to color an entire column, the row border disappears. Here is a link to the Plunker demonstration: http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview. Does anyone have a solution for this issue? ...

javascriptcssangularjsrowng-grid

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

htmlcss

Optimize flexbox navbar layout by eliminating unnecessary spacing between items

Greetings! As a novice in the world of web development, I must admit that I am facing some difficulties with my homework assignment. Despite my several attempts, I am unable to remove the spacing in the navbar on my university website clone project. It sim ...

htmlcssflexbox