Hangi platformu kullanıyorsun?

Media Queries'lerini Bootstrap'a göre referans almak istersen...
xs < 576px
sm ≥ 576px
md ≥ 768px
lg ≥ 992px
xl ≥ 1200px
xxl ≥ 1400px

let time = null;
const s = () => {
  time = (Math.floor(Math.random() * 10) + 1) * 1000;
  console.log (`${ time } milisaniye sonra çalışacak`);
  setTimeout(s, time)
}
s();

password_hash sürekli random salt kullandığı için veritabanından farkı bir değer üretecektir. Kullanıcı adı ve parola ile kullanıcıyı çekemezsin. O yüzden giriş yaparken sadece username ile veri çekmelisin.
Daha sonra password_verify ile postalanan şifre ile database'ten gelen hash'i doğrulatmalısın.

Bu doğru bir davranış olmaz. Bunun yerine tablona yeniden bağlanıp email'in olup olmadığını kendin kontrol ettirmen lazım. Mysql'e çalışma hatası verdirmenin bir anlamı yok.

order(flex) işini çözebilir.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order

Tampermonkey eklentisi işine yarayabilir.

ID olmadan unique slugfield ile çekebilirsin. Unique olması için ise ekstra kodlar yazman lazım.
Örnek deneme slug'ın var olup olmadığını kontrol edip , varsa bunu deneme-1 deneme-2 gibi veritabanına kaydetmelisin. Aynı işlemi update işlemlerinde de yapmalısın.
Uzatmayayım veritabanındaki blog tablona bir slug ekle unique key olsun. Onunla id olmadan slug ile çekebelirsin. Benim çözümüm bu şekilde olurdu.

XMLHttpRequest dediğin şey javascript nesnesi. Teknolojinin adı ise ajax. Böyle daha kolay sorunun cevabını bulursun.

Koşulunda parantez kullanarak yorumlama farkını ortadan kaldırabilirsin.