Adjusting grids in Bootstrap according to device orientation

I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind:
Landscape:

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">image goes here</div>
            <div class="col-xs-6">text goes here</div>
        </div>
    </div>
</body>

Portrait:

<body>
    <div class="container-fluid">
        <div class="row">
            image goes here
        </div>
        <div class="row">
            text goes here
        </div>
    </div>
</body>

What would be the best approach to achieve this using Bootstrap?

Answer №1

In case the bootstrap grid system is not functioning properly, an alternative solution would be to utilize media queries.

@media screen and (orientation:portrait) { ... } // Set width to 100%

@media screen and (orientation:landscape) { ... } // Set width to 50%

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

The sizing of elements in Firefox seems to be off when using percentage

I am facing an issue with a page that has 3 td elements all set at a width of 33.333333%. In Firefox, the browser seems to be computing it as an actual pixel value of 568px, causing the containers to run off the page. I have not defined any fixed widths in ...

JavaScript code to modify a table row

I have a dynamic table that increases with Firebase data, and I am trying to incorporate a delete and edit button on each row. While the remove button is working fine, I am facing issues with implementing the edit functionality. Although I came across some ...

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

IFrame transparency setting not recognized

I am encountering an issue with transparency when adding an iframe to a webpage. I have set the allowTransparency attribute of the iFrame to true, but upon inspecting the element using Internet Explorer's F12 Developer Tools, I noticed that although t ...

Text centered on hover for figure caption

Check out this fiddle http://jsfiddle.net/sLdhsbou/ where I am trying to center the "x" that appears on hover perfectly no matter what size the image is. Also, why does the transition not occur when moving the mouse outside of the figure, unlike when movi ...

Exploring a JavaScript file with the power of JavaScript and HTML

I have a .js file that contains the following data (excerpt for brevity) var albums= "tracks":[ {"title":"Dunnock","mp3":"Birdsong-Dunnock.mp3", "lyrics":"The Dunnock or hedge sparrow has a fast warbling song often delivered from t ...

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

tips for linking my webpage with the database

While working on a registration page, I encountered an issue where the entered information was not being stored in the database. Instead, an error message appeared: Notice: Undefined variable: sql in C:\xampp\htdocs\Bawazir\Untitled-1. ...

Guide to creating adaptive content using React and Material UI

For my current project, I am working on designing a product detail page using React and Material UI. The challenge I am facing is ensuring that the page remains responsive across different screen sizes. Specifically, I am struggling with the description se ...

Strategies for aligning a div element in the middle of the screen

Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc. Can be achieved using CSS or JavaScript UPDATE: I attempted to use Javascript's Sys.UI.Dom ...

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

Incorporating an additional row into a material table

Currently, I have implemented a mat-table with various features including drag and drop functionality and dynamic columns. However, I am facing an issue while trying to add row filters under the table header. I attempted to simply insert a <mat-row> ...

Issue with Angular 2 - Basic form validation no longer functioning

The Angular 2 application I've been working on includes a simple form with input fields and basic HTML validation. Here's an example: <form (onSubmit)="submit()"> <input type="email" /> <input type="submit" value="save" /> ...

Connecting with a php anchor and hash symbol in a website URL

Looking to include a PHP anchor along with a hash anchor in an HTML link. <?php echo '<a href="test.php?page='.$i.'#hash">'.$i.'</a>'; ?> The PHP code successfully echoes the link, but upon clicking it, th ...

Manipulating checkboxes with Jquery

I have set up a scenario with two divs and two checkboxes. When the first checkbox is clicked, the first div will appear. Subsequently, if the second checkbox is clicked, the second div will appear below the first div. I initially styled both divs. Howev ...

Modify the HTML indentation style in Visual Studio 2008

When working with Visual Studio 2008, I have noticed that it insists on indenting HTML in a specific way: <h1> title</h1> <h2> subtitle</h2> However, I personally prefer the following indentation style: <h1>title< ...

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

What could be causing the nonassign error to occur in the angular-bootstrap tabset?

<tabset class="paygrade-tabs"> <tab ng-repeat="tab in rps.currentPayGrade | orderBy: 'payGrade.code' : true track by $index" ng-click="changeTab(tab)" active="activeTabId === tab.id"> <tab-heading> <span> ...

Implementing dynamic CSS switching for right-to-left (RTL) support in a multilingual Next.js application

As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language. M ...