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 to access an HTML element using Vue's methods?

Here is an example of my Vue component structure: <template> ... </template> <script> export default { methods: { buildDescription () { if (!this.description) { const div = document.createEl ...

javascripthtmlvue.jsvuejs2vue-component

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

The onBlur() method is not functioning properly in JavaScript

Created a table using PHP where data is fetched from a MySQL database. One of the fields in the table is editable, and an onBlur listener was set up to send the edited data back to the MySQL table. However, the onBlur function doesn't seem to work as ...

javascriptphpmysqlajax

Ways to avoid browser refresh when uploading files in React applications

I'm working with a simple file upload form in React using hooks. import React, { useState } from 'react'; import { FlexContainer } from '@styles/FlexContainer'; const TestUpload = () => { const [file, setFile] = useState<F ...

javascriptreactjswebpack

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

In need of a method to create PDFs using client-side technology (specifically AngularJS)?

I need a method to create PDFs using AngularJs that includes HTML, CSS, and JavaScript elements. I have tried two options: jsPDF (which does not support CSS) Shrimp (built on Ruby) Neither of these solutions fit my needs. Is there another way to accom ...

javascriptangularjspdfjspdf

"An error occurs when attempting to clear Rad Grid data with javascript: htmlfile: Invalid argument thrown

Hello, I am currently developing an ASP.NET application. I am facing an issue where I need to clear the data in a Rad grid upon button click using JavaScript. The code snippet that I have attempted for this is as follows: document.getElementById(&a ...

javascriptjqueryhtmlasp.netgridview

Are extra parameters in the URL causing issues with AngularJS routing?

When I receive password reset instructions in my app, the URL I use to go to the server looks like this: /changepass?key=1231231231212312 In the controller, I have the following code: if (typeof $routeParams.key !== 'undefined') { $scope ...

javascriptangularjsurl-routing

Troubleshooting a GreenSock problem related to the z-index

With the help of GreenSock TweenMax, I have successfully achieved the desired animations. However, I am facing an issue where the "flag" that moves out to the right needs to be positioned over the next diamond instead of being underneath it. Interestingly, ...

jqueryanimationgsap

How can I transfer an instance of a class to dataTransfer.setData?

So I created a new instance of a class: let item = new Item(); Next, I attempted to serialize the item and add it to dataTransfer for drag and drop functionality: ev.dataTransfer.setData("info", JSON.stringify(item)); At some point, I need to retriev ...

javascripttypescript

Storing row details in Vue.js based on selected options from a dropdown menu

Displayed below is my code that generates a dynamic table. I am looking to save specific rows based on the selection made from a dropdown menu and then clicking on an update button. <b-field> <b-select name="contacted" id="" ...

javascriptvue.js

Designing a personalized mat-icon using the Github SVG

Trying to create a unique custom SVG mat-icon by loading the SVG directly from Github. My initial attempt using DomSanitizer was documented in this article, and it successfully loaded the SVG via HttpClient. Now, I am attempting to achieve this directly t ...

javascriptangulartypescriptsvgangular-material

Ways to retrieve a variable from outside of a function

I am in need of sending the following batch data to the database, but I am facing difficulties in including the course_id along with the batchData. Currently, I am retrieving the course_id from another service that fetches data from a course table. I am ...

javascriptangularjsangularjs-scope

Encountering NodeJS server issues with 505/404 errors while fetching partials

I am currently working on an application built using the M.E.A.N stack. For routing, I have implemented Angular Ui Router. However, I am encountering difficulties in correctly routing partials. The link for the main view is functioning properly with the ...

javascriptangularjsnode.jsexpress

How do I store the result of an Ajax request as a variable in a different function within a React component?

One of the challenges I'm facing involves making an ajax call that retrieves a list of movies, and then running another function with a separate ajax call to fetch the genre names. Since the first call only provides the genre IDs, I need to match each ...

javascriptjquerynode.jsajaxreactjs

Hide Scrollbar in CSS

Looking for a way to conceal the vertical scrollbar on my website, especially on mobile devices with touch scrolling capabilities. I attempted using CSS but didn't get satisfactory results, especially on older browser versions. ...

htmlcss

Utilize JQuery's .load() function to transmit JSON data to your Flask server

I am attempting to utilize JQuery's .load() function in order to transmit data to my Flask server and then, with that information, display a <div> that is loaded into the element making the request. This is what my code snippet looks like: $(&qu ...

javascriptpythonjqueryjsonflask

Update the content within a div based on the selected option from a dropdown menu or

Is there a way to change the displayed text based on user input or selected option? By default, the text shown is "Aa Bb Cc Dd Ee...", but it can be changed by selecting different options. If text is typed into the input field, the displayed text will up ...

javascripthtmljquery

React Error boundary is failing to perform as anticipated

Having issues implementing an error boundary in React. Here is the code snippet: ErrorBoundary.js import React from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: fal ...

javascriptreactjs

Using jQuery, you can submit text by pressing the enter key, while still maintaining the ability to insert

Hey there! I've encountered a minor issue while trying to post some text from a textarea only when the enter key is pressed. Currently, I have implemented a feature where the entered text smoothly appends to a div and then gets removed from the text ...

jqueryline-breaks