Align a Bootstrap div horizontally to vertically in a responsive manner

Styling for Responsive Design:

.wrap {
  display: flex;
  background: white;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}
.vcenter {
   margin: auto;
   margin-left: 10px;
}

.mbr-section-title3 {
  text-align: left;
}

.display-5 {
   font-family: 'Gotham-Book-Regular';
   font-size: 1.4rem;
}
.mbr-bold {
   font-weight: 700;
}

.display-6 {
   font-family: 'Gotham-Book-Regular';
   font-size: 1.4rem;
}

.fit100 {
  width: 100px;
  height: 100px;
}

.img-circle {
  border-radius: 50%;
} 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-6">
        <div class="wrap">
            <div>
                <img src="https://www.drupal.org/files/issues/default-avatar.png" class="img-circle fit100" alt="" title="">
            </div>
            <div class="text-wrap vcenter">
                <p class="mbr-fonts-style text1 mbr-text display-6">On Bawabba, you will find various types of services all under one roof. You can compare different profiles and contact the one that best suits your requirement directly wdslfjlksjdfk sdjfkljfsdkf sdk.</p>
                <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">John que</h2>
                <p class="nopadd">Designer - google.com</p>
            </div>
        </div>
    </div>
</div>

If viewed on a normal browser, the image and content within the class="wrap" are displayed from left to right as intended. However, for responsive design on mobile view, I would like the image div to be placed above the content div.

On mobile view, it should appear like this:
https://i.sstatic.net/wx8gx.png

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

Answer №1

To achieve this, use a media query.

.wrap {
  display: flex;
  background: white;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}
.vcenter {
   margin: auto;
   margin-left: 10px;
}

.mbr-section-title3 {
  text-align: left;
}

.display-5 {
   font-family: 'Gotham-Book-Regular';
   font-size: 1.4rem;
}
.mbr-bold {
   font-weight: 700;
}

.display-6 {
   font-family: 'Gotham-Book-Regular';
   font-size: 1.4rem;
}

.fit100 {
  width: 100px;
  height: 100px;
}

.img-circle {
  border-radius: 50%;
}

@media screen and (max-width:767px){
  .wrap {
    flex-wrap: wrap;
    text-align: center;
  }
  .img-wrap{
    width:100%;
  }
  
  .img-wrap img {
    display: inline-block;
  }
  
  .mbr-section-title3 {
    text-align: center;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-6">
        <div class="wrap">
            <div class="img-wrap">
                <img src="https://www.drupal.org/files/issues/default-avatar.png" class="img-circle fit100" alt="" title="">
            </div>
            <div class="text-wrap vcenter">
                <p class="mbr-fonts-style text1 mbr-text display-6">On Bawabba, you will find various types of services all under one roof. You can compare different profiles and contact the one that best suits your requirement directly wdslfjlksjdfk sdjfkljfsdkf sdk.</p>
                <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">John que</h2>
                <p class="nopadd">Designer - google.com</p>
            </div>
        </div>
    </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

Retrieve the offsetTop value of an accordion following its collapse

My goal is to determine the exact position of a clicked accordion title after it has been clicked. The issue I am facing is that the movement of Bootstrap's accordion collapse and my jQuery function are triggering almost simultaneously. As a result, ...

javascriptjqueryhtml

Although PhoneGap resolution remains consistent, the outcomes may vary

I seem to be facing a similar issue as discussed in this post on Stack Overflow: Screen Resolution On A PhoneGap App My problem is that I have both an iPad and an Android tablet, both with a resolution of 1024 pixels across. However, while my screen displ ...

androidioscsscordovajquery-mobile

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

javascriptjqueryhtml

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

What methods can I use to prevent a user from accidentally double clicking a link within an email?

After users request a password reset, they are sent an email containing a link to create a password reset code. This link remains valid for 24 hours and can be utilized multiple times within that time frame to generate new codes in case the initial one is ...

htmlemailhyperlinkclickdouble

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

Modify the text color of the fixed navigation when hovering over specific divs

Sorry if this question has already been asked. I've searched online but haven't come across a satisfactory solution. On my website, I have different background colors - blue and white. The text color in my navigation is mostly white, but I want i ...

javascripthtmlcssscrolltextcolor

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

javascriptcssmath

When the right-aligned navbar dropdown menu in Bootstrap 4.0.0 is opened, it extends beyond the viewport

Is there a solution in Bootstrap 4.0.0 to align the right edge of the dropdown menu with the right side of the toggle button? Here's an image showing the current layout: https://i.sstatic.net/3ccIE.png Code: <nav class="navbar navbar-expand-lg n ...

htmlcsstwitter-bootstrapbootstrap-4

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...

cssangularangular-material

How can I incorporate dashed borders between images using CSS?

New to the world of HTML and CSS, I'm trying to replicate a design I came across online for some practice. The website layout includes images separated by borders, and I'm unsure if this particular design can be achieved using regular CSS alone o ...

htmlcss

One source of HTML content for a div element across multiple webpages

Could you please provide guidance on where to start investigating or researching for this issue? I am interested in having a single source for the content of a <div>, which can be used across multiple pages. This way, I can update one source and hav ...

jqueryhtml

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

javascripthtmlcssarrayshtml-table

Ruling out the use of jQuery script within a dynamic framework

I have a unique jQuery script to create a "Back to Top" functionality: <script type="text/javascript"> $(document).ready(function(){ // Initially hide the #TopButton $("#TopButton").hide(); // Fade in the #TopButton on scrolling $(function () { ...

jqueryhtmlcss

Tips for changing the background color depending on the value

I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To v ...

htmlcssangular

Arranging the alignment of Bootstrap dropdown button alongside labels

When using bootstrap 3, I am attempting to create a row of labeled dropdown menus with a final query button. However, the buttons are currently aligned to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right results in ...

csstwitter-bootstrap-3drop-down-menupositionlabel

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

javascriptphpjqueryhtmlajax

Change SVG path data into a range of 0 to 1 in order to utilize it as a clip path with objectBoundingBox

My SVG shape, exported from Illustrator as a clipping path, is quite complex. The issue I'm facing is that objectBoundingBox restricts path data to the 0-1 range, but my path data exceeds this range. Here is the current code I'm using: <svg& ...

htmlcsssvg

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

jqueryhtmljsonmultilingual

Check if the input contains lowercase and uppercase letters, numbers, periods, and forward slashes using PREG_MATCH

I am in need of verifying some information and making sure that the sequence exclusively contains a-z, A-Z, 0-9, full-stop, or a forward slash. if(!preg_match("/^[a-zA-Z0-9 ./]*$/",$field)) { $fielderror = "Field can only contain a-z A-Z 0-9 . /"; } N ...

phphtmlscriptingpreg-match