Bootstrap has several useful classes for developing mobile-friendly layouts.
. Visible-phone, visible on phones with a width of 767px and below, hidden from the 979px to 768px tablet, invisible on the desktop, this is the default.
. Visible-tablet, hidden on phones with a width of 767px and below, visible on a 979px to 768px tablet, hidden from the desktop, is the default.
. Visible-desktop, hidden on phones with a width of 767px and below, invisible on a 979px to 768px tablet, visible on the desktop, this is the default.
. Hidden-phone, hidden on phones with a width of 767px and below, visible on a 979px to 768px tablet, visible on the desktop, is the default.
. Hidden-tablet, visible on phones with a width of 767px and below, hidden from the 979px to 768px tablet, visible on the desktop, is the default.
. Hidden-desktop, visible on phones with a width of 767px and below, visible on a 979px to 768px tablet, hidden from the desktop, is the default.
We directly on the code:
<!doctype html>
For effects we switch dreamweaver to design mode, and then switch between different devices, such as:
bootstrap---friendly layout for mobile devices