Arabic, Hebrew, Persian and Urdu read right to left, so the whole layout must mirror. Framework7 572,986 ships a mirrored stylesheet for this. Put dir="rtl" on <html> and import framework7/css/bundle/rtl instead of framework7/css/bundle. BookNest's rtl.html changes only its <html> tag and loads an entry module with that import, giving panel B above. The mirroring is pure CSS, so keep your HTML in its normal order. At startup the app reads the root's computed direction into app.rtl (the console line from App Initialization Options now prints rtl=true), and swipe-back, range sliders, toggles and tabs read that flag to reverse their gestures.
In the 9.1.3 RTL bundle the Material navbar title keeps its 16-pixel gap on the left, so it touches the right edge of the screen; one override fixes it:
/* 9.1.3's RTL build keeps the Material title's 16px gap on the left: mirror it */
html[dir="rtl"].md .navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
margin-left: 0;
margin-right: 16px;
}Choose the direction before the app starts, because app.rtl is read only once, at initialization.