Setting up bootstrap columns for mobile and medium screens in your web design project is essential for creating

  1. Instructions for medium screen size:
|-----(1)||-----(2)|
  1. Guidelines for mobile screen (iPhone X):
|---------------(2)|
|-----(1)|

In the first scenario, both (1) and (2) have the same column size in a single line. However, in the second scenario, (1) and (2) are on different lines.

<div class="row">
<h3 class="col-7 col-md-6" >(1)</h3>
<h3 class="col-12 col-md-6" >(2)</h3>
</div>

In the second scenario (mobile screen), I am having difficulty setting up the columns. Can anyone help me with this for the second scenario?

htmlcssbootstrap-4bootstrap-modalangular-ui-bootstrap

Answer №1

[Edited]

Flexbox is the key :)

Utilizing flex properties can simplify the process, although they may seem complex initially, they are highly efficient.

Illustration

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fce2fce1aea9b8adff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-5">
  <h2>Option</h2>
  <div class="w-50 d-flex flex-column-reverse flex-md-row">
    <h3 class="col-7 col-md-6 border border-dark">(1)</h3>
    <h3 class="col-12 col-md-6 border border-dark">(2)</h3>
  </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

Having trouble getting the Bootstrap tooltip to work on a Select option?

Is there a way to have a tooltip displayed for each option in the select box? <select ng-model="rightList" class="form-control" size="13" multiple> <option ng-repeat="item in selectedList" value="{{$ ...

javascripthtmlangularjstwitter-bootstraptwitter-bootstrap-tooltip

Firing a jQuery event at precise mouse coordinates

I am facing a unique challenge with my website design - I have implemented a semi-transparent header and footer, and now I need to capture click and hover events in order to trigger the same event on a different DOM element at the exact mouse location. Wh ...

jqueryhtmlcss

Optimize the css file by updating it and minifying the content

Recently, I created a website for a client using PHP, HTML, Javascript, and CSS. Initially, I utilized SASS to streamline my styling process. However, the client now requests the ability to modify typography and main colors on their own. While I can easi ...

javascriptphphtmlcss

Creating a Single Button Photo Upload Functionality in ASP.net Using C# From a GridView Row

I am attempting to enable photo uploading from a row within a GridView, where the file name is generated based on the details of that row. While I have a functioning version of this feature, it does not seem to work consistently across different browsers. ...

javascriptc#htmlasp.netgridview

Issues with ion-textarea located within ion-item in IONIC 2 causing malfunction

I am experiencing an issue with an ion-textarea inside of an ion-item. Everything displays correctly, but as soon as I touch the textarea, the keyboard appears and then disappears. This makes it impossible to enter any text. It almost seems like the onblu ...

htmlangularionic-frameworkionic2

Center an image vertically in an AdminLte content-wrapper division

I am currently utilizing an AdminLte template as the framework for my design. In the designated area where I need to insert the main content, it is structured in the following manner: <div class="content-wrapper"> <se ...

htmlcsslaravelbootstrap-4

Debugging Slideshows Using JavaScript

I am currently working on creating a slideshow and I'm facing some challenges with the JavaScript functionality. Everything seems to be running smoothly except for one issue - when I click right once, it transitions correctly, but if I then click left ...

javascriptjqueryhtml

javascript popup window with redirection functionality

Hello everyone, I need assistance with the code snippet below: echo ("<SCRIPT LANGUAGE='JavaScript'> window.alert('Successfully Updated') </SCRIPT>"); I am trying to redirect the page to my edit.php after c ...

phpjavascripthtml

Live PHP statement continuously updates display

Below is the setup for my input field. The question to fill in the input will only be prompted if either $client_chargeBy is equal to "Square Foot" or "Room" <div class="col-md-12 p0 "> <div class="col-md-6 PL0 p0_smresp"> <di ...

phphtmllaravel

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

javascripthtmlangularjsfilter

Modifying class selectors does not have any effect on newly added items

Imagine you have a ragged array structured as shown below: var myarray = [ [ ['k1', [] ], ['k2', ['l1', 'l2'] ], ['k3', [] ], ], [ ['k1', [] ], ['k2', ['l1', 'l2&ap ...

javascriptjqueryhtml

Problem with modals not triggering within the iDangero.us swiper

I am encountering an issue with the iDangerous.us Swiper where I cannot activate any events within the swiper-wrapper. I am attempting to trigger a modal on each slide but nothing is happening. Any Modal placed inside the swiper-wrapper does not work. I a ...

javascriptjqueryhtmlmodal-dialogswiper.js

What is the best way to create a scrollable Material UI modal and dialog?

Having a problem with my mui modal where the top content is getting cut off and I can't scroll up. I've tried adding the {overflow:"scroll"} property to the modal but it's not working. Here's the code snippet I'm currentl ...

javascriptcssreactjsmaterial-ui

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element. Here is the CSS: *{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body{ background-ima ...

htmlcss

By employing Jquery animate height on a mouse click, the element is effectively eliminated

Is there a way to resize a div from 100% to 50% of its height on click of a button? Currently, when the button is clicked, the div animates but ends up being hidden. I would like the div to resize to 50% when the button is clicked once, and then resize b ...

jquerybootstrap-4jquery-animate

Dynamic user group system that leverages Ajax technology for seamless integration with an HTML interface, powered by PHP and

I am new to this, so please forgive my lack of knowledge. Currently, I am in the process of creating an Ajax-driven web application for managing user contact groups. This application allows users to store contacts based on assigned groups. Once a user con ...

phpjavascripthtmljquery

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable. I attempted to create another div ...

htmlcss

Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...

csstwitter-bootstrap

What is the solution to fixing a flashing div?

I've been using a jQuery method to make my div blink. Check it out: JSFIDDLE <div class="blink">blinking text</div>non-blinking <div class="blink">more blinking text</div> function blink(selector){ $(selector).fadeOut(& ...

javascriptjquerycsshtml

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

javascripthtmlangular