CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sagar
Sagar

Reputation: 67

How to change the buttons display order from desktop to mobile?

I have buttons like below:

<button>cancel</button>
<button>submit</button>

The cancel button is on the left side and submit is on the right side. When it comes to mobile view I have to display submit on top and cancel on the bottom. How can I do this?

Here is my example: http://plnkr.co/edit/BpTrv6aI5xDCBNddUPj1?p=preview

Upvotes: 0

Views: 1693

Answers (3)

Sagar
Sagar

Reputation: 67

Here is the solutions to change display order of buttons from mobile to desktop 

<http://plnkr.co/edit/JQS9vQRIeHgLC5EtCkDh?p=preview>

Upvotes: 0

MFazio23
MFazio23

Reputation: 1312

You can look at using a media query to change the display of the buttons when you hit a certain threshold:

@media screen and (max-width: 480px) {
    button {
        display: block;
    }
}

Displaying the buttons as block will show them one on top of another.

Upvotes: 2

razemauze
razemauze

Reputation: 2676

You can swap the buttons and float them on desktop, then give them full width on mobile:

<button class="pull-right">submit</button>
<button class="pull-left">cancel</button>

And this CSS should be on desktop:

.pull-right {
    float:right;
}

.pull-left {
    float:left;
}

Upvotes: 0

Related Questions