Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue.

In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side.

I would like the sidebar to appear at the top in mobile view, followed by the content. I have tried using position:absolute; and adjusting margins without success.

If you have suggestions on how to achieve this, please let me know.

You can also view my code on jsFiddle: here

The following script has worked for me:

<script type="text/javascript>
var windowWidth = $(window).width();

if(windowWidth <=767){
    $('.wf-span-4').insertBefore('.wf-span-8');
}
</script>
javascriptjqueryhtmlcss

Answer №1

To simplify your code, consider making the following adjustments.

You can choose between two options:

  1. Reorganize the structure of the website to initially display in reverse order.
  2. Utilize jQuery to relocate the content when the screen width is below a certain threshold, for example: 
    $('#sidebar').insertBefore('#content')

Answer №2

In my opinion, the best approach would be to ensure that your markup is in the correct order from the start. Structure should be separated from styling as much as possible.

Here is an example of how your code could look:

<section class="main">
    <div class="sidebar">Bye</div>
    <main class='content'>Hi</main> 
</section>

On mobile, you would simply need to remove the floats so the content reverts back to the default flow. Here's how you could do it:

.content {
    width:75%;
    float:left;
}
.sidebar {
    width:25%;
    float:right
}

@media screen and (max-width:767px) {
    .content, .sidebar {
        float: none;
    }
}

(I have updated the class names and markup for better readability)

You can view the updated demo here: http://jsfiddle.net/ehozb5v9/2/

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

Is there a way for me to monitor the ngSrc attribute of an image element and retrieve the updated width and height within my personalized directive?

Here is a snippet from index.html: <img ng-src="{{ImageURL}}" my-image/> This is from app.js: var app = angular.module('plunker', []); app.controller('MyCtl', function($scope) { $scope.ImageURL = ""; $scope.ImgWidth = 0; ...

javascriptangularjs

Is the implementation of Ajax correctly functioning in Firefox? Is there a synchronous issue occurring?

Upon examining the code below, consider which log will be displayed first: In Chrome & IE, "sync ajax call: success" is printed first as expected, However, in FF (tested in FF 3.6 & FF 17.0), "async ajax call: success" appears first instead, indica ...

jqueryajaxfirefox

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

"Integrate a URL segment into the primary URL with the help of AngularJS or JavaScript

One interesting case involves a URL path that is structured in the following way. http://localhost:12534/urlpart1/urlpart2?querystring=140 The challenge here is to replace "urlpart2" with "urlpart3" using either javascript or AngularJS. One approach is t ...

javascriptangularjs

Content will not render when JavaScript generates SVGs

As I delve into the world of JavaScript and SVG to create interactive graphics for a website, I've run into a puzzling issue with programmatically generated SVG paths not being drawn. Below is a sample code that highlights this problem: <!DOCTYPE ...

javascripthtmlsvg

Designing a webpage layout with DIV elements that span across multiple rows

I am attempting to create a layout that features two columns, with the right column spanning two rows. I am looking to accomplish this using only DIV tags: +-----------+-----------+ + + + + + + +-----------+ ...

html

Embedding the scrollbar within the div container

I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...

htmlcss

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

Currently utilizing Angular 2 in a project that is compiled with TypeScript. Encountering an issue when attempting to generate a blob image: Error TS2339: Property 'webkitURL' does not exist on type 'Window' The TypeScript code causi ...

javascriptgoogle-chrometypescriptangularwebkit

Material UI grid items overlapping issueIn Material UI, the grid

Here is a snippet of code for your review: <div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center "> <Grid className='mt-3' container spacing={2}> ...

javascriptreactjsmaterial-ui

The lua.vm.js ajax callbacks are triggering, but unfortunately, the requested data is not

After raising this issue at https://github.com/kripken/lua.vm.js/issues/5, I realized that submitting it to stackoverflow might yield a faster response due to higher exposure. To ensure clarity, I will restate my question: How can the callback data be acce ...

javascriptjqueryajaxlua

Asynchronous function nested within a loop

Hello there! I am currently working on converting a SQLite database to NeDb using the following code snippet: const sqliteJSON = require('sqlite-json'); const Datastore = require('nedb') const exporter = sqliteJSON('etecsa.db&apo ...

javascriptnode.js

HTML list style with varying images at the same level in a ul tag

I am working on an Application that generates output with li tags. I am trying to find a way to apply different list-style-image for each li tag of the same level within the ul, while keeping the HTML code as simple as possible. Each li with a class of gre ...

htmlcsshtml-lists

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

javascripthtmlangulardatetypescript

organizing data using backbone marionette router

I am attempting to display the query string, but I am only receiving null as output. The query string I am using is http:://localhost/admin/brands?foo=bar and no matter what I try, queryString remains null. I even attempted /brands/?foo=bar with no succes ...

javascriptjquerybackbone.jsmarionette

Generate and delete dynamic iFrames through variable manipulation

I'm currently developing a landing page specifically for our pilots to conveniently access weather information before taking off. However, due to the limitations posed by our computer security measures, I can only utilize iframes to obtain the necessa ...

javascripthtmlvariablesiframe

prevent the page from scrolling to the top when clicking on an empty <a> tag

Is it possible to prevent the page from scrolling back to the top when a user clicks on an empty link tag using only HTML and without JavaScript? For example, if there is an empty link at the bottom of the page and a user clicks on it, the page jumps bac ...

csshtml

Can we selectively execute certain tests in Cypress using support/index.js?

I need to selectively run certain tests from a pool of 50 test files located in the integration folder. Specifically, I only want 10 of them to execute. In an attempt to achieve this, I am trying to configure the selection process within the support/index. ...

javascriptnpmcypressconfigtest-runner

How are the actions in react redux able to utilize dispatch and getState methods?

Could you please explain how the actions.js in the reddit example of the react redux docs is able to access the dispatch and getState functions without importing them explicitly? I was under the assumption that every method needed to be imported in each ...

javascriptreactjsimportreduxreact-redux

Is there a way to merge the .load function and the document.referrer function together?

Is there a way to load a specific div from the previous page that a user originated from using a form? $(document).ready(function() { $("#div_to_be_populated").load('url #div'); }); How can I utilize the document.referrer function in the ur ...

javascriptjquery

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

javascripthtmlcss