controlling order

tuan231195 · Aug 12, 2020 · da380cb · da380cb
1 parent 399492e
commit da380cb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/components/home/HomeMain.tsx b/src/components/home/HomeMain.tsx
@@ -16,28 +16,28 @@ export default function HomeMain({ profile }: { profile: typeof userProfile }) {
 	return (
 		<Container>
 			<Grid smGap={3} mdGap={5} className={`sm:pt-4`} collapse={true}>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-2 md:order-none'}>
 					<AboutMe about={profile.about} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-1 md:order-none'}>
 					<GeneralInfo profile={profile.basic} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-4 md:order-none'}>
 					<WorkExperience experiences={profile.work} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-3 md:order-none'}>
 					<Skills skills={profile.skills} linkedin={profile.basic.linkedin} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-6 md:order-none'}>
 					<Awards awards={profile.awards} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-5 md:order-none'}>
 					<Education educationList={profile.education} />
 				</GridColumn>
-				<GridColumn md={7} lg={8} sm={12}>
+				<GridColumn md={7} lg={8} sm={12} className={'order-8 md:order-none'}>
 					<GithubContribution githubUsername={profile.basic.githubUsername} />
 				</GridColumn>
-				<GridColumn md={5} lg={4} sm={12}>
+				<GridColumn md={5} lg={4} sm={12} className={'order-7 md:order-none'}>
 					<Languages languages={profile.languages} />
 				</GridColumn>
 			</Grid>

diff --git a/src/components/ui/containers/Grid.tsx b/src/components/ui/containers/Grid.tsx
@@ -26,11 +26,13 @@ export function Grid({
 	return (
 		<div className={`flex flex-wrap overflow-hidden min-w-full ${className}`}>
 			{React.Children.map(children, (child: any, i) => {
-				const { props } = child;
+				const {
+					props: { className, ...props },
+				} = child;
 				return (
 					<GridColumn
 						key={i}
-						className={cn(` sm:py-${smGap}`, {
+						className={cn(className, ` sm:py-${smGap}`, {
 							'px-0': collapse,
 							'py-0': collapse,
 							[`px-${gap}`]: gap && !collapse,