Web responsiveness, i really need help

Question

https://code.sololearn.com/Wb5GPsZ0RHCQ/?ref=app
That is my code, a page from the site(not yet online).
this particular page still collapses even on a tab, I expected the names of the societies to be in front of the images on larger screens, but it still collapses except on a desktop, please I need help, my deadline is fast approaching

Answer 1

Your bootstrap css is not correct, if you run it on code playground
Change to
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

Javascript code should run from window.onload

Answer 2

I understand what you mean, but am running that website locally, that means am linking the bootstrap locally

Answer 3

In order members here can solve your problem, your code should be able to run on code playground too.
I have changed it for you here.

https://code.sololearn.com/W9ikDCKjXeg9/?ref=app

However I do not quite understand your question, hopefully other members could give you a better solution.

Answer 4

@Calvin, am sure u want to help me. let me explain again.
The code I attached is a page from a website am working on, some of those .js codes are for other pages of the website.
I downloaded bootstrap on my computer to use on the website, so that is why the bootstrap link appears that way.
Now my problem is this, when am on the computer, the names of the societies are arranged in front of the picture and not under the pictures like they appear here.
When I click on request desktop version, it still appears the way it appears here instead of the names rearranging and displaying in front of the pictures not under the pictures.
I sent the files to a tablet, the display is still like this instead of the names going in front of the pictures not under.
in summary; I want the names of the societies in front of the individual society image on tabs and also when I request desktop version also, I hope u understand this time

Answer 5

Instead of use grid class sm, may be your should use xs grid class for phone, since you want the same format across all devices.

https://code.sololearn.com/W9ikDCKjXeg9/?ref=app

Answer 6

bootstrap can solve it..either online or offline

Answer 7

I used media queries to tackle it