Hola Shurmano!
Bueno bootstrap no está mal, pero si quieres maquetar de manera más profesional te recomiendo no usarlo. Yo te recomendaría usar una metodología muy buena que personalmente utilizo siempre, BEMIT CSS.
Básicamente se alimenta de la nomenclatura BEM de CSS (alomejor has oído hablar de esto) y el sistema ITCSS (para organizar tus archivos y carpetas de CSS para un buen control).
En mi canal de youtube tienes ejemplos donde utilizo BEMIT CSS y además, si te convence, hice un curso en udemy sobre eso.
Si quieres más información comentamos por privado, ningún problema. (No quiero hacer spam en este hilo).
De todas formas, yo predico con el ejemplo, en todos los proyectos y en todos los vídeos míos verás que la utilizo.
Aún así, para que tus propiedades de CSS funcionen en más dispositivos, que según comentas es lo que te está dando problemas, necesitas prefijar algunas propiedades de tu CSS.
Por ejemplo para el display:flex, harías esto:
.my-class {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Pero hacer todo esto a mano para cada propiedad de CSS es un poco agobiante, por ello, un preprocesador de CSS es lo que te interesa.
Por ejemplo, SCSS.
Un preprocesador convierte código SCSS (código parecido a CSS) a código CSS, que es el que el navegador entiende.
En SCSS puedes utilizar variables (para colores, tamaño de fuentes y lo que se te ocurra), condicionales (for, if...else), funciones, mixins (mírate esto sobretodo, muy útil) y más cosas.
Aquí te dejo más información al respecto:
SCSS
Y aquí te dejo una herramienta para que pruebes rápido y de manera online cómo se traduce tu código SCSS a CSS (habilita la opción autoprefixer para que te añada lo de los prefijos en tus propiedades de CSS):
sassmeister.com
Haz alguna prueba y verás que es bastante cómodo de usar.
Aún así (y perdona por la chapa) esto no te dará toda la compatibilidad deseada.
Hay propiedades de CSS que no serán compatibles en algunos navegadores y otras que sí (como ya sabes).
Con esta web, sabrás en concreto que propiedad funciona y para que navegadores:
caniuse.com
Por ejemplo, para el display:flex,
¿En qué navegadores funciona bien?
¿En cuales no?
Aquí podrás saberlo:
caniuse.com flexbox
Resumiendo, bootstrap te añade clases CSS generales para usar, que se basan en propiedades compatibles en principio con muchos navegadores, por ejemplo, antes usaban float:left, float:right para alinear columnas, ahora me parece que ya usan flex.
Esto ayuda mucho cuando estás empezando y cuando no tienes que maquetar diseños muy avanzados.
Pero si quieres ser front end avanzado y maquetador experto, ya sabes mi opinión!
(Pido perdón por el tocho)