Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below:

In order to achieve this, three divs were created:

<div class="row">
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
</div>

The middle div should be hidden on tablet view, then the last div will move under the first on mobile view.

On desktop, all three divs display properly, however, on tablet and mobile they collapse vertically.

Is there a simple way to accomplish this with Bootstrap, or do custom CSS media queries need to be written?

htmlcsstwitter-bootstrap-3

Answer №1

If you wish to conceal the center div, consider using Bootstrap utility classes:

Bootstrap 3

Refer to the Bootstrap documentation

To hide the div on tablets and phones, utilize the visible-lg class.

I recommend utilizing col-sm and col-xs for collapsing or maintaining the div based on screen width (Learn more about the grid system):

<div class="row">
  <div class="col-sm-3 col-xs-9">Text</div>
  <div class="col-sm-3 visible-lg">Text</div>
  <div class="col-sm-3 col-xs-9">Text</div>
</div>

Check out this fiddle

Bootstrap 2.3

Bootstrap documentation

For hiding the div on tablets and phones, use the visible-desktop class.

Answer №2

.container {max-width:100%;position:relative;}
.col-lg-4{width:33.33333%;float:left;padding:10px;height:200px;}

Answer №3

Aside from the response by @Getz, I recommend checking out these additional resources that delve into your concerns in depth.

To specifically target a device, use min-device-width. For instance:

For iPhones

@media only screen and (min-device-width: 480px){
.middle_div { display: none;}
/* other responsive styles*/
}

For tablets

@media only screen and (min-device-width: 768px){
.middle_div { display: none;}
}

An ideal solution to cater to various devices is as follows

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer №4

<div class="row visible-lg">
  <div class="col-md-4">Content</div>
  <div class="col-md-4">Content</div>
  <div class="col-md-4">Content</div>
</div>

<div class="row visible-md">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Content</div>      
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Content</div>      
 </div>

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

Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...

htmlcss

Launch the file explorer using JavaScript/HTML

Is there a way to launch a real explorer window instead of the browser's directory look? For example, like the windows key + e window... Is there a method using html or JavaScript? I've noticed it in a Firefox add-on called new tab king, but I c ...

javascripthtmlwindows-explorer

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

javascriptjqueryhtmljsonajax

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

javascripthtmlhtml-framework-7

Conceal content in Bootstrap navbar when clicking on #link

I am facing an issue with the navbar-fixed-top element as it is causing content to be hidden from the container. To resolve this common problem, you can add the following CSS code: body { padding-top: 70px; } After applying the above code, the container ...

htmlcssbootstrap-4navbar

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...

css

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Hey there! I've implemented accordion functionality using the addClass() and removeClass() methods. Here's a breakdown of what I did: <div class="container"> <div class="functionality">Accordion</div> <ul class="acco ...

javascriptjquerycss

parsing the data from an HTML document containing embedded variables

Is there a more efficient way to use file_get_contents() on an html file containing 3 variables and have those variables populated with data from $_POST? For example: -html file- <html> . . <table> <tr> <td> ...

phphtml

Recurrence of the Chosen Headers

After discovering the new website http://csslint.net, I've started to question my approach to constructing stylesheets. One method I have recently used is as follows: /* Fonts */ h1 { font-size:20px } p { font-size:12px } /* Colors */ h1 { colo ...

cssperformancecss-selectorscsslint

What is the reason behind the label value persistently showing up after the page is refreshed?

Why is the data that I deleted from the database still showing in the label? Even after running the delete function and reloading the page. The label should not have any value once the data is deleted. Here is my code: $(document).on('click', ...

jqueryhtml

Troubleshooting problem with Bootstrap navbar collapsing when certain items are not collapsed

I am currently working on creating a Bootstrap menu for a website that has certain items that should not collapse on extra-small screens. While I have made progress in implementing this feature, I have encountered an issue. When the screen size is extra-s ...

htmltwitter-bootstrap-3

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

javascripthtml

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

javascriptjqueryhtmlcss

Make a portion of the title come alive on hover

Looking to add animation to a title that consists of two parts: "HARD" and "WARE", with the second part having a more transparent color. When hovering over the "HARD" word, the colors reverse correctly. However, when hovering over the "WARE" word, only on ...

htmlcsscss-selectors

The content has been successfully loaded using ajax, but it is not displaying

I've been experimenting with djax and have noticed that when I click on an anchor tag, the URL changes as expected. However, even though the page source reflects this change, the contents of the page itself remain unchanged. Any thoughts on why this m ...

javascriptjqueryajaxhtmlhtml5-history

Uploading videos with Node.js

What is the best package for uploading videos in Node.js and saving them to a database? ...

htmlsqlangularjsnode.js

Tips for effectively passing a parameter in @url.Action

I stumbled upon this piece of code: <button type="button" class="btn btn-inverse btn-danger" onclick="@("window.location.href='" + @Url.Action("ActionName", "ControllerName") +"'");"> Link </button> for redirecting- it works gre ...

jqueryhtmlasp.net-mvcrazor

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api