Organize information according to the size of the window

I am in need of reorganizing some content based on the size of the window or screen.

This is how it appears in full view:

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

But here's what I want when the screen size is 768 pixels or less: https://i.sstatic.net/N1ky0.png

Below is the structure of my code:

<div class="container">
    <div class="row">
        <div class="col-md-9 site-main-content">
            <div class="content">
                <!--Main content-->
            </div>
        </div>

        <div class="col-md-3 site-sidebar-content">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <div class="box-3"></div>
        </div>
    </div>
</div>

I'm not quite sure how to make this work.

Update: Using the hidden property is not an option for me. Box 1 contains an AJAX search form, and if I place it above the main content on a full screen and set it to display none, the AJAX form stops working. So, I am in search of a JavaScript snippet that can remove box 1 from its original position and load it above the main content when viewed on a smaller screen size.

javascriptresponsive-design

Answer №1

Explore the implementation of hidden classes in this example and share your feedback...

Updated Fiddle

HTML Structure:

<div class="row">
  <div class="col-md-9">
      <div class="box-1 hidden-md hidden-lg">
        Box 1
      </div>
      <div class="mainBox">
        <div class="content">
          Main Content
        </div>
      </div>
  </div>
  <div class="col-md-3">
    <div class="box-1 hidden-xs hidden-sm">
      Box 1
    </div>
    <div class="box-2">
      Box 2
    </div>
    <div class="box-3">
      Box 3
    </div>
  </div>
</div>

CSS Styles:

.mainBox{
  background:green;
  min-height:300px;
  padding:10px;
  margin-bottom:10px;
}
.box-1{
  background:red;
  min-height:100px;
  padding:10px;
  margin-bottom:10px;
}
.box-2, .box-3{
  background:#00A2E8;
  min-height:100px;
  padding:10px;
  margin-bottom:10px;
}

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

Enhance scrolling with a bounce effect

My goal is to implement a smooth scrolling experience with a bounce effect when the user over-scrolls, meaning they scroll too much to the top or bottom. I found an answer on Stack Overflow that explains how to achieve smooth scrolling, but I also want to ...

javascriptcss

Analyzing JSON information using an AJAX request from a local file

I have a PHP file on a web server that is executing queries to a MySQL database. Currently, I am testing a site on my local PC which utilizes a JS file with AJAX requests to retrieve JSON data from the mentioned PHP file. My question is whether it is fea ...

javascriptphpmysqlajaxjson

What is the process by which a JavaScript Date object is converted to a string when you log it to the

Whenever I create objects in JavaScript and output them to the console, I typically see a JavaScript object displayed. For instance: var myObj = { bla: "foo" } console.log(myObj); This code will display: { bla: "foo" } However, whe ...

javascriptdateobject

Personalized JQuery popup before leaving the page

Looking to display a unique jQuery dialog box with options for Yes, No, and Cancel when a user attempts to navigate away from the current page or close the window. The default browser dialog confirmation is displayed on the beforeload event, but we are tr ...

javascriptjqueryonbeforeunloadwindow.onunload

Transforming Form Input into Request Payload for an AJAX Call

I'm facing a challenge in submitting my form data through a POST AJAX request and haven't been able to come across any solutions so far. Due to the dynamic creation of the form based on database content, I can't simply fetch the values usin ...

javascriptphpajaxpostrequest

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

javascriptangularjspromise

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

javascripthtmlcss

Exploring the use of the Next.js page router for implementing internationalization (i18

I need assistance implementing Dutch and English language translations for my entire website. Can anyone provide guidance? I have tried using i18n localizely, but it only works for individual pages. I am looking to implement translations on a larger scale ...

javascriptnext.jsinternationalizationnext.js13

Verify whether all the elements within a specific div are distinct by utilizing jQuery

I need to create a select box that, when an option is chosen, generates a certain number of textboxes within a div. Currently, there are three fields: display_name[], user_name[], and user_password[] The code for this functionality is as follows: <se ...

javascriptjqueryhtml

Adjust parameters using JavaScript and three.js in real-time

I am not well-versed in JavaScript and I am facing an issue. I need to dynamically change the parameter passed to a function written in JavaScript, but the code is structured in a way that is unfamiliar to me. Therefore, I am seeking assistance. On my web ...

javascriptphpjquerythree.js

What is the solution for the red underline issue with the @json Blade directive in VSC?

Everything seems to be functioning correctly with these variables, but I'm curious as to why they are underlined in red. Does anyone have a solution for this issue? https://i.sstatic.net/mzlkY.png Error message https://i.sstatic.net/4LajF.png ...

javascriptphplaravellaravel-blade

Is there a way to incorporate external HTML files into my webpage?

Looking to update an existing project that currently uses iFrames for loading external HTML files, which in this case are actually part of the same project and not from external sites. However, I've heard that using iFrames for this purpose is general ...

javascriptjqueryhtml

javascript: restrict the quantity of products

As a beginner in javascript, I am currently working on creating a simple RSS reader. However, I am facing a challenge in limiting the number of feeds to 5 items, especially since the target site may have 100 or more feeds. Here's the code snippet I&ap ...

javascriptjqueryarrays

When I attempt to return an object from a function and pass the reference to a prop, TypeScript throws an error. However, the error does not occur if the object is directly placed in

Currently, I have the following code block: const getDataForChart = () => { const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; const test = { ...

javascriptreactjstypescriptreact-chartjs

Tips for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side. https://i.stack.i ...

javascriptjquerycss

Using Jquery to Retrieve the Attribute Value from an HTML Element

I am currently developing an interactive online quiz application that is organized by chapters, with each chapter having its own quiz. Users can navigate through the chapters via a menu and start quizzes by clicking on a button after loading the chapter co ...

javascriptjquery

How to dynamically update form select options using Zend Framework 2 (2.3) and AJAX

I'm facing an issue with concatenating 3 dynamic selects - state, country, city - using an ajax request. It seems more complex without zf2! The function works fine when $idState is manually set within stateCountryCityAction (e.g. $idState = 1;), but d ...

javascriptphpjqueryajaxzend-framework2

Tips for displaying an alert in the upcoming event loop

I recently started learning VueJS and decided to create a practice game to strengthen my understanding of the framework. http://jsfiddle.net/mzref4o0/1/ Within this game, the attack method is crucial in determining the winner: attack: function(isSpecial ...

javascriptvue.js

What is the mechanism behind making a Promise appear synchronous when using a Proxy in JavaScript?

const handler: ProxyHandler<any> = { get: (target: Promise<any>, prop: string, receiver: any) => { return target.then((o) => { return o[prop].apply(o); }); }, }; return new Proxy(obj, handler) ...

javascriptnode.jstypescript

A fresh PHP page escapes from the confines of an iframe and expands to occupy the entire

When calling a new url from inside an iframe, the goal is for the new url to break free from the confines of the iframe and appear full screen. The challenge lies in not having control over the call to the new php file, as it is initiated by a credit card ...

javascriptphpiframe