Elevate column to top position in mobile display with Bootstrap

I am currently working with Bootstrap column classes and have set up four columns as follows:

<div class="col-md-3">
    @include('schedulizer.classes-panel')
    @include('schedulizer.time-span-options-panel')
    @include('schedulizer.other-options-panel')
</div>

<div class="col-md-9 col-centered">
    @include('schedulizer.schedule-panel')
</div>

This setup gives me a layout that looks like this:

https://i.sstatic.net/KLzEN.png

However, in mobile view, the main element (the schedule) is pushed all the way to the bottom like this:

https://i.sstatic.net/WxSW0.png

My question is, is there a way to adjust the layout so that the column is "pushed" to the top when a smaller screen resolution is detected?

htmlcsstwitter-bootstrap

Answer №1

A solution is to rearrange them and utilize the push and pull method

<div class="col-md-9 col-centered col-md-push-3">
    @include('schedulizer.schedule-panel')
</div>

<div class="col-md-3 col-md-pull-9">
    @include('schedulizer.classes-panel')
    @include('schedulizer.time-span-options-panel')
    @include('schedulizer.other-options-panel')
</div>

To see a demonstration, visit: http://www.bootply.com/GdWNOo6stu

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

Struggling to align a div at the center of a screen

Snippet of HTML Code: <body> <!-- Social Media Icons --> <div id="sm1"><a href="/"><img src="images/facebook.png" height=40 width=40></img></a> </div> <div id="sm2"><a href="/"><img src="image ...

htmlcsscenter

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

The drag functionality can only be used once when applied to two separate div elements

Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...

javascriptjqueryhtmlcss

Retrieving a pair of data points from a Vue <select> event when it changes

I am facing an issue with a dropdown menu that is using an array with key:value pairs. I want the dropdown to only show values, but when a selection is made, I need to pass both the value and the key using the @change event. <select @change=" ...

htmltypescriptvue.jsdrop-down-menu

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

Passing an undefined value to the database via AJAX upon clicking a button

Hi there, I'm currently working on a table where I'm trying to perform an inline edit and update the value in the database by clicking on a button (an image). I've attempted to use an onclick function, but it seems to show "value=undefined&a ...

javascriptphpjqueryhtmlajax

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

htmlcss

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below). The rele ...

htmlcssresponsive-design

"Is there a way to extract text enclosed within HTML tags, such as <div>text</div>, with Selenium using C#

How can I extract the text 'True' from within the HTML tags <div>text</div> using Selenium and C#? <div type='data' id='OfferInCart' style='display:none;'>True</div> I have attempted to retr ...

c#htmlselenium-webdriver

Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath. I've experimented with floating both left and right, clearing, setting display to inline-blo ...

htmlcss

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

javascripthtmlfirebasegoogle-cloud-firestore

onpageshow event behaves as expected exclusively on webkit browsers (triggers function solely when visible on the screen)

I am inserting an HTML file using an object tag. The encompassing div of the object tag is hidden with a display:none property. However, I encounter an issue where the onpageshow event that I placed on the body tag of the HTML object behaves differently a ...

javascripthtmleventswebkitvisible

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

javascripthtml

Display or conceal toggle in ruby utilizing jQuery

I'm facing an issue with the functionality of a button that is meant to hide and show a form using jQuery. Initially, I added a path to signup in the button so that it would display and function properly. Now, when I click the button, the form shows u ...

javascriptjqueryhtmlruby-on-railsruby

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

javascripthtmlcssbootstrap-4

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

htmlangulartypescript