How do you change the order of html elements based on the size of the screen?
For example, on large screen like desktops, the order would be like this:
element1 element2 element3
However, when seeing this on phone, it wouldn't fit the width of the screen. So, I would like it to look like this:
element2
element1
element3
Since Div2 is the main div, I would like it to be on the middle on large screens and on top on smartphone screens.
I am using Foundation as the framework for the website.
Here's an example code:
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
</div>
<div id="element2" class="column column-block">
</div>
<div id="element3" class="column column-block">
</div>
</div>
I have spent a lot of time learning html and css so that's all I really know to make a website. I have been planning to learn javascript so it would be fine if the solution requires it.
Here's the CSS way, using flexbox (take a look at this guide to help you get started with flexbox):
flex-direction is either row or column (depending on how you want your elements to flow)
Change their order with order (using order: 1 on #element2 will put it at the end)
#container {
display: flex;
flex-direction: column;
}
#element2 {
order: -1;
}
<div id="container" class="row medium-up-3">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
Here's one way you could do it:
In CSS you can use a media query to display or hide content:
#media (max-width:632px){
#computer{
display: none;
}
#phone{
display: block;
}
}
You can then have 2 x html sections for both computers / smartphones for example (If you'd like to have big differences in structure etc. between devices)
Good read on media queries - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
You just simply use class medium-up-12 instead of class on container ID.
Goo Luck.
<div id="container" class="row medium-up-12">
<div id="element1" class="column column-block">
#1
</div>
<div id="element2" class="column column-block">
#2
</div>
<div id="element3" class="column column-block">
#3
</div>
</div>
Related
I have a problem with scrollTop that partially works that I will try to describe. First to get it work I applied the solution found here.
I have an angular component that renders a list of nested angular components in it using *ngFor. Snippet follows (parent):
<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
<div *ngIf="accountsToggle">
<div class="grid-x ruler">
<div class="small-4 cell">
<div class="text-left sub-header">Header 1</div>
</div>
<div class="small-1 cell">
<div class="text-left sub-header">Header 2</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 3</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 4</div>
</div>
<div class="small-3 cell">
<div class="text-center sub-header">Header 5</div>
</div>
</div>
<div *ngFor="let data of displayAccounts">
<member-product
[memberNumber]="mnum"
id={{data.accountNumber}}
(scrollIntoView)="scrollToView(data.accountNumber)"
[product]="data" </member-product>
</div>
</div>
</div>
</div>
The child's html contains info on each header and in addition a ellipsis toggle at the far right that looks like this:
screenshot of a single element (Apparently I need more reputation points to fully add a screenshot. Hope it helps anyway).
The problem: everytime I click the ellipsis it will expand the account information (NOTE: this is NOT another angular nested component) to reveal even more information AND the account clicked will autoscroll to the top. screenshot of expanded widgetThis works for the first accounts considering that there might be dozens or even hundreds but will fail to scroll only for the last few and it will fail gradually, meaning that it will begin to scroll less closer to the top of its container until the very last item which will not scroll at all. Also it fails when only a few elements are displayed causing no overflow-y where the scrolling simply does not happen.
Scroll code: (I'm using event emitter here as you might have already noticed)
scrollToView(accountNumber): void {
var element = document.getElementById(accountNumber);
var topPos = element.offsetTop;
document.getElementById('scrollable-container').scrollTop = topPos - 10;
}
Css code:
.scrollable {
max-height: 24rem;
position: relative;
}
I not quite sure if this is an overflow-y related issue or what. I am completely puzzled with this.
Searching for this very particular problem in Stackoverflow yielded no results, be it angular be it jquery although it doesn't apply to my angular 2 scenario.
I appreciate any insight or help on the matter.
I'm trying to do is something like this:
That's one row of a <table>. In other words, it's a <tr> which contains three <td>s. Now I want to make the same structure without using <table> tag (also without using <ul> <li> tag).
I want to do that by using <div>s. Is it possible?
This is my code:
<div class="share_edit_flag">
<span>share</span>
<span>share</span>
<span>share</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
As you see, the result of my code doesn't look like the image which is in the top of my question.
As far as I know, I need to set float, display properties to them. I've tested them, but without achieving the expected result.
You can use the display:table and display:table-cell properties.
table - Let the element behave like a <table> element
table-cell - Let the element behave like a <td> element
Since you only need one row, you can skip the table-row (<tr>) element if you want. More info about the display property here.
Flexbox is also a good solution, unless you want support for older browsers and IE.
Example:
.table {
display: table;
width: 100%; //if you want the table to extend the full width of the parent
}
.table > div {
display: table-cell;
border: 1px solid red; //added this for highlight
}
<div class="table">
<div class="share_edit_flag">
<span>share</span>
<span>share</span>
<span>share</span>
</div>
<div class="editor">
edited May 21 16 at 11:58
<div class="profile">
<img src="#" />
Rory O'Kane
<b>12.6k</b>
<!-- I don't have any badge in my website -->
</div>
</div>
<div class="author">
asked May 21 16 at 11:51
<div class="profile">
<img src="#" />
vasanthkumarmani
<b>1</b>
<!-- I don't have any badge in my website -->
</div>
</div>
</div>
.container {
display: flex;
height: 30px; }
.first {
flex: 1 1 auto;
background: red; }
.second {
width: 100px;
background: green; }
.third {
width: 100px;
background: yellow; }
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
You can achieved it using flexbox. And it is also flexible in container with 100% width. However, old browsers is not supported.
http://caniuse.com/#feat=flexbox
Hope it helps. Cheers!
This is very possible indeed.
Not too long ago, css flexbox was released and is now usable, prefixed, in the majority of browsers. This is used very often on the web and is a very good skill to learn.
Lately css grids crept up. Not worth spending too much time on, in my opinion, but it's a nice skill to have nevertheless
<div class="row">
<div class="col-lg-7">
<div>block1 with IDs and classes</div>
<div>block2 with IDs and classes</div>
</div>
<div class="col-lg-5">
<div>block3 with IDs and classes</div>
</div>
</div>
How to make it look like
block1
block3
block2
for mobile?
P.S. Of course I took a look at this questions before I asked mine:
SO: How do I change Bootstrap 3 column order on mobile layout?
It doesn't help.
Also, adding hidden-xs and visible-xs for two blocks of
<div>block2 with IDs and classes</div>
in different places doesn't help as IDs should be unique on the page.
Any suggestions? Thank you.
Example:
IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.
No need to use push/pull. Just think "mobile-first"..
<div class="row">
<div class="col-lg-7">
<div>block1</div>
</div>
<div class="col-lg-5">
<div>block3</div>
</div>
<div class="col-lg-7">
<div>block2</div>
</div>
</div>
http://www.codeply.com/go/jgvSJrMOnk
In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..
#media (min-width:1200px) {
.pull-lg-right {
float:right;
}
}
Related:How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)
using push and pull properties of grid will do your work try this the push and pull will be only applied for small device
<div class="row">
<div class="col-lg-3">block1 with IDs and classes</div>
<div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
</div>
Edit clearfix added for large device
On a small screen, div1 and div2 are showing side by side overlapped, and I want div1 content shows first and div2 content to be shown just underneath div1. How do I achieve these requirements with or without media queries?
<div class="row">
<div class="col-xs-6" id="div1">
test column1
</div>
<div class="col-xs-6" id="div2">
test column 2
</div>
</div>
Update your elements' classes to this:
<div class="row">
<div class="col-xs-12 col-sm-6" id="div1">
test column1
</div>
<div class="col-xs-12 col-sm-6" id="div2">
test column 2
</div>
</div>
This way, at viewports >= 768px, they'll be side-by-side and at 767px & below they'll display one below the other.
As mentioned in a comment on the OP, please refer to the documentation, which covers this in greater detail: http://getbootstrap.com/css/#grid
I have reviewed all of the existing questions / answers, and still cannot get a working solution, so I would appreciate any comments on my particular code below.
I would prefer not to use hard-coded image sizes (pixel counts) in my code, and I am willing to use a combination of Less, CSS, or Javascript in the solution.
The image should be centered vertically and horizontally within the Bootstrap column, and remain centered even when the screen is resized.
My HTML:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel">
Some content
</div>
</div>
<div class="col-md-2">
<img src="images/myimage.png" class="img-responsive center-block">
</div>
<div class="col-md-5">
<div class="panel>
Some content
</div>
</div>
</div>
</div>
</div>
Here's an option using transform:
html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */
http://www.bootply.com/YG8vpg1rIf
You can overcome the vertical align problem by using css Flexbox.
Add the class "vertical_center" to the parent div.
Then add the following css
.vertical_center {
display: flex;
align-items: center;
}
Hope this will solve your problem.
Use following CSS property for making the image vertically centered
img { vertical-align: middle; }
For horizontal alignment use class name text-center of bootstrap along with the other class name of your div if yu have. Like,
<div class="col-md-2 text-center"> ... </div>.
It will make the content of the div horizontally centered.