Achieve hidden and visible elements using CSS without redundancy

Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks?

This is my current approach:

<div class="container"> 
<div class="row">
    <div class="col-md-8 d-none d-md-block left-panel">
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
    </div>
    <div class="col-md-4 d-none d-md-block right-sidebar">Right Sidebar
        <div class="widget1">Widget 1 </div>
        <div class="widget2">Widget 2 </div>
        <div class="widget3">Widget 3 </div>
    </div>
</div>
</div>

.left-panel {
float: left; 
background: gray;
width: 400px;
}

.box1,
.box2,
.box3 {
width: 200px;
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}

.right-sidebar {
background: pink;
float:left;
width: 100px;
}

https://jsfiddle.net/p684mz2u/

Bootstrap 4 is being utilized for this project.

What I'm aiming for is to rearrange the layout so that Widget 1 appears above Box 1, Widget 2 between box 1 and 2, and Widget 3 between box 2 and 3 within the right sidebar.

I understand that I could simply hide Widget 1 on desktop and tablet by using display:none and then duplicating the code in the desired order for mobile. However, I want to explore achieving this using CSS tricks without duplicating the existing code.

Answer №1

To achieve this without repeating code in CSS, you can organize all the divs within the same parent row. Then, utilize ordering classes to rearrange the layout for smaller screens...

<div class="container">
    <div class="row">
        <div class="col-12 bg-pink">
            <div class="row d-md-block">
                <div class="left-panel col-md-8  order-1 float-left">
                    <div class="box1 mt-2">Box 1</div>
                </div>
                <div class="right-sidebar col-md-4 order-0 float-left">Widget 1 </div>
                <div class="right-sidebar col-md-4 order-2 float-left">Widget 2 </div>
                <div class="right-sidebar col-md-4 order-4 float-left">Widget 3 </div>
                <div class="left-panel col-md-8 order-3 float-left">
                    <div class="box2 mt-2 ">Box 2</div>
                </div>
                <div class="left-panel col-md-8 order-5 float-left">
                    <div class="box3 mt-2">Box 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

Check out the demonstration:

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

Generate div elements corresponding to individual objects

Previously, I inquired about a similar issue but have not come across any solutions. I made updates to my code, which is now functioning well, however, I am facing a new dilemma. Here is the PHP code I am currently working with: class individual { pu ...

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

Appending an empty <li> tag has no effect

I'm facing an issue with this loop where it always generates empty <li></li> tags. Can anyone help me understand why this is happening and suggest a solution? For reference, the loop runs 2 times (verified). function a(){ for (var i ...

Retrieve the associative array from the user input by utilizing jQuery

How can I create an associative array from a form containing multiple text inputs using jQuery (or directly in JS)? Here's an example of the form: <form> <input type="text" name="name[13]" value="test 1" /> <input type="text" name="nam ...

How to choose elements using jQuery according to their CSS properties?

Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as: <div class="lcelqilne1471483619510ttupv"></div& ...

Bring to life a dashed slanted line

After incorporating the code from this post on Stack Overflow about animating diagonal lines, I was pleasantly surprised with how well it worked. However, my next goal is to style the line in such a way that it appears dotted or dashed, as opposed to one ...

Transition from the previous image to the new one with a fading effect to enhance list item navigation

I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...

Attempting to squeeze a container with a set width into a parent element that spans the entire width of the screen (100

As I embark on my coding journey, I am faced with the challenge of creating a website that features full-width (100%) containers with fixed-width containers nested inside. Despite my efforts to experiment with both figures and divs, I have not been success ...

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

Exploring radio button functionality in Rails 5.1.6 integrated with Bootstrap 4

Looking for assistance in setting up a basic radio button with rails 5.1.6. Any help would be much appreciated. The form seems to be functioning without errors, however the stored value is not what was expected (current stored value: {:id=>"project_typ ...

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other. I have attempted to use flex-direction:row; for the explanation ...

Tips for creating a star program using Angular 2+

Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...

What is the best way to eliminate the extra spacing on the right side of my navigation bar?

Hello everyone! I am diving into the world of HTML and CSS, but I've hit a roadblock. Despite searching through various resources and forums, I can't seem to find a solution to my problem. The issue at hand involves an irritating space in my nav ...

Is it possible to use an SVG image as a border with a variable height in CSS

Check out this jsfiddle for my current project's nav setup. I want to center the logo in the middle of the nav with three links centered around it. However, I need the design to be responsive across various screen widths. Any advice on how to achieve ...

Creating adaptable horizontal grids is straightforward with these steps

Is it possible to create a 3 horizontal responsive grid using only CSS and HTML, without relying on any framework? I've attempted it but am struggling to come up with a solution. ...

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...

Learn how to align elements in the Toolbar component using the package "@mui/material" version "^5.11.3"

Recently, I came across this example on their website: https://codesandbox.io/s/0f50jf?file=/demo.js I've been attempting to align all toolbar elements in the center using: sx= {{ justifyContent: 'center', alignItems: 'center&apo ...

Encountering issues with Stylus when trying to compile the `@font-face

I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...